Angular PrimeNG Form Calendar Popup and Inline Component

Last Updated : 07 Oct, 2022

Angular PrimeNG is a collection of UI components for the Angular framework developed and maintained by Google. It enables developers to develop scalable and responsive interfaces in less time and hence increases productivity. In this article, we will see Angular PrimeNG Form Calendar Popup and Inline Component.

The Calendar Component is used to input the user’s date and time. By default, the calendar is shown in popup mode but the inline property can be used to display it in inline mode.

Angular PrimeNG Form Calendar Popup and Inline Properties:

inline: If this property is set to true, the calendar will be shown in inline mode.

Syntax:

<p-calendar
    [inline]="true"
    [(ngModel)]="....">
</p-calendar>

Creating Angular Application and Installing the Module:

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: Finally, Install PrimeNG in your given directory.

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

Project Structure: The project Structure will look like this after following the above steps:

Project Structure

Example 1: This example shows the popup mode of the calendar component. It is enabled by default.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2> 
<h4> 
  Angular PrimeNG Form Calendar 
  Popup and Inline Component 
</h4> 
  
<h3>Calendar In Popup Mode</h3> 
<p-calendar [(ngModel)]="calendarVal"> 
</p-calendar>

app.component.ts

import { Component } from "@angular/core"; 
  
@Component({ 
    selector: "app-root", 
    templateUrl: "./app.component.html", 
}) 
  
export class AppComponent { 
    calendarVal?: Date; 
}

app.module.ts

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 { CalendarModule } from 'primeng/calendar'; 
  
@NgModule({ 
    imports: [ 
        BrowserModule, 
        BrowserAnimationsModule, 
        FormsModule, 
        CalendarModule 
    ], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent], 
}) 
export class AppModule { }

Output:

Example 2: In this example, we set the inline property of the calendar component to true to show it in inline mode.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2> 
<h4> 
    Angular PrimeNG Form Calendar  
    Popup and Inline Component 
</h4> 
  
<h3>Calendar In Popup Mode</h3> 
<p-calendar [inline]="true" 
            [(ngModel)]="calendarVal"> 
</p-calendar>

app.component.ts

import { Component } from "@angular/core"; 
  
@Component({ 
    selector: "app-root", 
    templateUrl: "./app.component.html", 
}) 
  
export class AppComponent { 
    calendarVal?: Date; 
}

app.module.ts

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 { CalendarModule } from 'primeng/calendar'; 
  
@NgModule({ 
    imports: [ 
        BrowserModule, 
        BrowserAnimationsModule, 
        FormsModule, 
        CalendarModule 
    ], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent], 
}) 
export class AppModule { }