Методы Angular PrimeNG Inplace

Опубликовано: 23 Февраля, 2023

Angular PrimeNG — это библиотека компонентов пользовательского интерфейса для приложений Angular. Он предлагает множество готовых тем и компонентов пользовательского интерфейса для различных задач, таких как ввод, меню, диаграммы, кнопки и т. д. В этой статье мы увидим методы Angular PrimeNG Inplace.

Компонент Inplace используется для облегчения редактирования и отображения пользователю. При нажатии на вывод компонента Inplace открывается содержимое. Существует два метода для компонентов Inplace, которые перечислены ниже.

Методы Angular PrimeNG Inplace:

активировать: этот метод активирует содержимое Inplace.
деактивировать: этот метод деактивирует содержимое Inplace.

Шаблоны Angular PrimeNG Inplace:

display: этот шаблон используется для указания отображаемой части Inplace.
content: этот шаблон используется для указания части контента Inplace.

Синтаксис:

// File: app.component.html
<p-inplace #inplace>
    <ng-template pTemplate="display">
        ...
    </ng-template>
    <ng-template pTemplate="content">
        ...
    </ng-template>
</p-inplace>

// File: app.component.ts
this.inplace.activate();
this.inplace.deactivate();

Создание приложения Angular и установка модуля:

Шаг 1: Создайте приложение Angular, используя следующую команду.

ng new appname

Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.

cd appname

Шаг 3: Наконец, установите PrimeNG в указанный вами каталог.

npm install primeng --save
npm install primeicons --save

Структура проекта: Структура проекта будет выглядеть следующим образом после выполнения вышеуказанных шагов:

Пример 1. В этом примере мы использовали метод активации компонента inplace для активации его содержимого. Мы передаем метод, прикрепляя его к нажатию кнопки.

приложение.component.html:

HTML

<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Angular PrimeNG Image Templates</h3>
 
<button
    pButton
    label="Activate Inplace"
    (click)="inplaceActivate()"
    class="mb-6">
</button>
 
<p-inplace #inplace>
    <ng-template pTemplate="display">
        Click to see image
    </ng-template>
    <ng-template pTemplate="content">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220907004414/gfglogo.png"
            width="200">
    </ng-template>
</p-inplace>

app.component.ts:

Javascript

import { Component, ViewChild } from "@angular/core";
import { Inplace } from "primeng/inplace";
 
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: []
})
export class AppComponent {
    @ViewChild("inplace") ip!: Inplace;
    inplaceActivate() {
        this.ip.activate();
    }
}

app.module.ts:

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { TableModule } from "primeng/table";
import { InplaceModule } from "primeng/inplace";
import { ButtonModule } from "primeng/button";
 
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        InplaceModule,
        FormsModule,
        TableModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
 
export class AppModule { }

Выход:

Пример 2. В этом примере мы использовали методы деактивации и активации компонента Inplace для активации и деактивации контента на месте.

приложение.component.html:

HTML

<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Angular PrimeNG Image Templates</h3>
 
<button
    pButton
    label="Activate Inplace"
    (click)="inplaceActivate()"
    class="mb-4 mr-3">
</button>
 
<button
    pButton
    label="Deactivate Inplace"
    (click)="inplaceDeactivate()"
    class="mb-4">
</button>
 
<p-inplace #inplace>
    <ng-template pTemplate="display">
        Click to see image
    </ng-template>
    <ng-template pTemplate="content">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220907004414/gfglogo.png"
            width="200">
    </ng-template>
</p-inplace>

app.component.ts:

Javascript

import { Component, ViewChild } from "@angular/core";
import { Inplace } from "primeng/inplace";
 
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: []
})
export class AppComponent {
    @ViewChild("inplace") ip!: Inplace;
    inplaceActivate() {
        this.ip.activate();
    }
 
    inplaceDeactivate() {
        this.ip.deactivate();
    }
}

app.module.ts:

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { TableModule } from "primeng/table";
import { InplaceModule } from "primeng/inplace";
import { ButtonModule } from "primeng/button";
 
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        InplaceModule,
        FormsModule,
        TableModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
 
export class AppModule { }

Выход:

Ссылка: http://primefaces.org/primeng/inplace

Technical Scripter Picked AngularJS

Методы Angular PrimeNG Inplace

HTML

Javascript

Javascript

HTML

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ