|
Angular PrimeNG is a UI component catalog for angular applications. It consists of a wide range of UI components that help in making fast and scalable websites. In this article, we will see Inplace Templates in Angular PrimeNG.
The Inplace component is used to edit and display the content in place of others and render the actual output when clicked. Inplace components have two templates named display and content.
Syntax:
<p-inplace >
<ng-template pTemplate="display">
...
</ng-template>
<ng-template pTemplate="content">
...
</ng-template>
</p-inplace>
Creating Angular application & module installation:
Step 1: Create an Angular application using the below command.
ng new newapp
Step 2: After creating your project folder i.e. newapp, move to it using the below command.
cd newapp
Step 3: Install PrimeNG and PrimeIcons in your project directory.
npm install primeng --save
npm install primeicons --save
Project Structure: After complete installation, the project structure will look like the following:
Example 1: This example shows the use of the inplace component templates to display a text and edit it when clicked.
app.component.html
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Angular PrimeNG Inplace Templates</h3>
<p-inplace [closable]="true">
<ng-template pTemplate="display">
{{text}}
</ng-template>
<ng-template pTemplate="content">
<input
type="text"
[value]="text"
pInputText
[(ngModel)]="text">
</ng-template>
</p-inplace>
|
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styles: []
})
export class AppComponent {
text: String = "GeeksforGeeks";
}
|
app.module.ts
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { FormsModule } from "@angular/forms";
import { TableModule } from "primeng/table";
import { InplaceModule } from 'primeng/inplace';
import { InputTextModule } from 'primeng/inputtext';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
TableModule,
InplaceModule,
InputTextModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
|
Output:
Example 2: This example shows the use of the inplace component to display a text and when we click the text the image appears.
app.component.html
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Angular PrimeNG Inplace Templates</h3>
<p-inplace [closable]="true">
<ng-template pTemplate="display">
Click to Display Image
</ng-template>
<ng-template pTemplate="content">
<img
src=
alt="horje-logo">
</ng-template>
</p-inplace>
|
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styles: []
})
export class AppComponent {
text: String = "GeeksforGeeks";
}
|
app.module.ts
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { FormsModule } from "@angular/forms";
import { TableModule } from "primeng/table";
import { InplaceModule } from 'primeng/inplace';
import { InputTextModule } from 'primeng/inputtext';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
TableModule,
InplaceModule,
InputTextModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
|
Output:
Reference: http://primefaces.org/primeng/inplace
|
Angular PrimeNG Table Flexscroll
Angular PrimeNG ScrollTop Properties