Open In App

Angular PrimeNG Form Calendar Methods Component

Improve
Improve
Like Article
Like
Save
Share
Report

Angular PrimeNG is an open-source front-end UI framework developed by PrimeTek for developing efficient and scalable angular applications. Using PrimeNG in their projects helps developers to cut down the development time and focus on other important areas of the application. In this article, we will see Angular PrimeNG Form Calendar Methods Component.

The Calendar Component is used to take date and time input from the users. The Methods supported by the calendar component are listed below.

Angular PrimeNG Form Calendar Methods:

  • toggle: This method is used to toggle the visibility of the calendar when it is in popup mode. This does not have any effect when the calendar is shown in inline mode.

 

Syntax:

this.calendar.toggle();

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 is a basic example illustrating the use of the toggle method of the calendar in popup mode.

app.component.html




<h2 style="color: green">GeeksforGeeks</h2>
<h4>
    Angular PrimeNG Form Calendar
    Methods Component
</h4>
  
<button pButton label="Toggle!" 
        (click)="toggleCal()" 
        class="block mb-4">
</button>
  
<p-calendar #cal dateFormat="dd/mm/y - D" 
                 [(ngModel)]="calendarVal">
</p-calendar>


app.component.ts




import { Component, ViewChild } from "@angular/core";
import { Calendar } from "primeng/calendar";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
})
  
export class AppComponent {
    @ViewChild('cal') calendar!: Calendar;
    calendarVal?: Date;
  
    toggleCal() {
        this.calendar.toggle();
    }
}


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


Output:

 

Example 2: In this example, when we click on the button the toggle method is invoked twice, once immediately and the second time after 3 seconds.

app.component.html




<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Form Calendar
  Methods Component</h4>
  
<button pButton label="Toggle!" 
                (click)="toggleCal()" 
                class="block mb-4">
</button>
  
<p-calendar #cal dateFormat="dd/mm/y - D" 
                 [(ngModel)]="calendarVal">
</p-calendar>


app.component.ts




import { Component, ViewChild } from "@angular/core";
import { Calendar } from "primeng/calendar";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
})
  
export class AppComponent {
    @ViewChild('cal') calendar!: Calendar;
    calendarVal?: Date;
  
    toggleCal() {
        this.calendar.toggle();
        setTimeout(() => {
            this.calendar.toggle();
        }, 3000);
    }
}


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


Output:

 

Reference: http://primefaces.org/primeng/calendar



Last Updated : 07 Oct, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads