Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use Dialog Basic in Angular PrimeNG. We will also learn about the properties along with their syntaxes that will be used in the code.
Dialog component is used to make a component containing some content to display in an overlay window.
Angular PrimeNG Dialog Basic Properties:
- header: It is the title text of the dialog. It is of string data type, the default value is null.
- visible: It specifies the visibility of the dialog. It is of the boolean data type, the default value is false.
- style: It is used to set the inline style of the component. It is of object data type, the default value is null.
- styleClass: It is used to set the style class of the component. It is of string data type, the default value is null.
Syntax:
<p-dialog header="...." [style]="{width: '...vw'}" [(visible)]="..."> </p-dialog> <p-button (click)="..." label="...."> </p-button>
Creating Angular application & module installation:
Step 1: Create an Angular application using the following command.
ng new appname
Step 2: After creating your project folder i.e. appname, move to it using the following command.
cd appname
Step 3: Install PrimeNG in your given directory.
npm install primeng --save npm install primeicons --save
Project Structure: After carrying out the above steps, the project structure will look like the following:
- Run the below command to see the output:
ng serve --open
Example 1: Below is the code example that illustrates the use of Angular PrimeNG Dialog Basic using short content.
< div style = "text-align: center" >
< h2 style = "color: green" >GeeksforGeeks</ h2 >
< h5 >Angular PrimeNG Dialog Basic</ h5 >
< p-dialog
header = "GeeksforGeeks"
[(visible)]="BasicShow"
[style]="{ width: '30vw' }">
< p >
Angular PrimeNG is a framework used
with angular to create components with
great styling this framework is very easy
to use and is used to make responsive
websites. This article will show us how
to use the Dialog of Basic in Angular PrimeNG.
Angular PrimeNG is a framework used with
angular to create components with great
styling this framework is very easy to use
and is used to make responsive websites.
This article will show us how to use the
Dialof Basic in Angular PrimeNG.
</ p >
< ng-template pTemplate = "footer" >
< p-button
(click)=" BasicShow = false "
label = "Accept"
styleClass = "p-button-success" >
</ p-button >
< p-button
(click)=" BasicShow = false "
label = "Reject"
styleClass = "p-button-danger" >
</ p-button >
</ ng-template >
</ p-dialog >
< p-button
(click)="showDialog()"
label = "Click Here Geek!" >
</ p-button >
</ div >
|
import { Component } from "@angular/core" ;
import { PrimeNGConfig } from "primeng/api" ;
@Component({ selector: "app-root" ,
templateUrl: "./app.component.html" ,
styles: [],
}) export class AppComponent { constructor(private primengConfig: PrimeNGConfig) {}
ngOnInit() {
this .primengConfig.ripple = true ;
}
BasicShow: boolean = false ;
showDialog() {
this .BasicShow = true ;
}
} |
import { NgModule } from '@angular/core' ;
import { BrowserModule } from '@angular/platform-browser' ;
import { BrowserAnimationsModule } from '@angular/platform-browser/animations' ;
import { AppComponent } from './app.component' ;
import { DialogModule } from 'primeng/dialog' ;
import { ButtonModule } from 'primeng/button' ;
@NgModule({ imports: [
BrowserModule,
BrowserAnimationsModule,
DialogModule,
ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
}) export class AppModule{} |
Output:
Example 2: Below is another code example that illustrates Angular PrimeNG Dialog Basic using long content.
< div style = "text-align: center" >
< h2 style = "color: green" >GeeksforGeeks</ h2 >
< h5 >Angular PrimeNG Dialog Basic</ h5 >
< p-dialog
header = "Long Content"
[(visible)]="BasicShow"
[style]="{ width: '30vw' }">
< p >
Angular PrimeNG is a framework used
with angular to create components with
great styling this framework is very easy
to use and is used to make responsive websites.
This article will show us how to use the
Dialof Basic in Angular PrimeNG.
</ p >
< p >
Angular PrimeNG is a framework used
with angular to create components with
great styling this framework is very
easy to use and is used to make
responsive websites. This article will
show us how to use the Dialof Basic
in Angular PrimeNG. Angular PrimeNG is
a framework used with angular to
create components with great styling this
framework is very easy to use and is used
to make responsive websites. This article
will show us how to use the Dialof Basic
in Angular PrimeNG. Angular PrimeNG is a
framework used with angular to create
components with great styling this
framework is very easy to use and is used
to make responsive websites. This article will
show us how to use the Dialof Basic in Angular
PrimeNG. Angular PrimeNG is a framework used
with angular to create components with great
styling this framework is very easy to
use and is used to make responsive websites.
This article will show us how to use the Dialof
Basic in Angular PrimeNG.
</ p >
< p >
Angular PrimeNG is a framework used
with angular to create components with
great styling this framework is very
easy to use and is used to make
responsive websites. This article will
show us how to use the Dialof Basic
in Angular PrimeNG. Angular PrimeNG is
a framework used with angular to
create components with great styling this
framework is very easy to use and is used
to make responsive websites. This article
will show us how to use the Dialof Basic
in Angular PrimeNG. Angular PrimeNG is a
framework used with angular to create
components with great styling this
framework is very easy to use and is used
to make responsive websites. This article will
show us how to use the Dialof Basic in Angular
PrimeNG. Angular PrimeNG is a framework used
with angular to create components with great
styling this framework is very easy to
use and is used to make responsive websites.
This article will show us how to use the Dialof
Basic in Angular PrimeNG.ow to use the Dialof
Basic in Angular PrimeNG.
</ p >
< ng-template pTemplate = "footer" >
< p-button
(click)=" BasicShow = false "
label = "Accept"
styleClass = "p-button-success" >
</ p-button >
< p-button
(click)=" BasicShow = false "
label = "Reject"
styleClass = "p-button-danger" >
</ p-button >
</ ng-template >
</ p-dialog >
< p-button
(click)="showDialog()"
label = "Long Content" >
</ p-button >
</ div >
|
import { Component } from "@angular/core" ;
import { PrimeNGConfig } from "primeng/api" ;
@Component({ selector: "app-root" ,
templateUrl: "./app.component.html" ,
styles: [],
}) export class AppComponent { constructor(private primengConfig: PrimeNGConfig) {}
ngOnInit() {
this .primengConfig.ripple = true ;
}
BasicShow: boolean = false ;
showDialog() {
this .BasicShow = true ;
}
} |
import { NgModule } from '@angular/core' ;
import { BrowserModule } from '@angular/platform-browser' ;
import { BrowserAnimationsModule } from '@angular/platform-browser/animations' ;
import { AppComponent } from './app.component' ;
import { DialogModule } from 'primeng/dialog' ;
import { ButtonModule } from 'primeng/button' ;
@NgModule({ imports: [
BrowserModule,
BrowserAnimationsModule,
DialogModule,
ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
}) export class AppModule{} |
Output:
Reference: https://primefaces.org/primeng/dialog