Массив сообщений Angular PrimeNG
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы увидим массив сообщений в Angular PrimeNG.
Компонент «Сообщения» используется для отображения сообщения с определенной серьезностью. Для отображения сообщений пользователь может использовать свойство value. Служба сообщений игнорируется, а массив сообщений привязывается к свойству value, чтобы поделиться сообщением с компонентом.
Синтаксис:
<p-messages [(value)]="msgs"></p-messages> <button type="button" (click)="show()">Show </button> <button type="button" (click)="clear()">Hide </button>
Создание приложения Angular и установка модуля :
Шаг 1. Чтобы создать приложение angular, вам необходимо установить интерфейс командной строки angular с помощью команды npm:
npm install -g angular-cli
Шаг 2 : Теперь мы создадим угловой проект:
ng new project_name
Шаг 3: После создания углового проекта перейдите в папку для выполнения различных операций:
cd project_name
Шаг 4: После создания приложения Angular установите необходимый модуль с помощью следующей команды:
npm install primeng --save npm install primeicons --save
Структура проекта: После успешной установки появится следующая структура проекта:
- Шаг для запуска приложения: Запустите приложение, используя следующую команду из корневого каталога проекта:
ng serve --open
Пример 1: В этом примере описывается массив сообщений Angular PrimeNG.
- app.component.html
HTML
< div > < h1 style = "color: green" >GeeksforGeeks</ h1 > < h3 >Angular PrimeNG Messages Array</ h3 > < p-messages [(value)]="gfg" [enableService]="false"> </ p-messages > </ div > |
- app.module.ts
Javascript
import { NgModule } from "@angular/core" ; import { BrowserModule } from "@angular/platform-browser" ; import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ; import { AppComponent } from "./app.component" ; import { MessagesModule } from "primeng/messages" ; import { MessageModule } from "primeng/message" ; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, MessageModule, MessagesModule, BrowserAnimationsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
- app.component.ts
Javascript
import { Component } from "@angular/core" ; import { Message } from "primeng/api" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" , }) export class AppComponent { gfg: Message[] = []; ngOnInit() { this .gfg = [ { severity: "info" , summary: "Info " , detail: "Messages Array" }, { severity: "success" , summary: "Success " , detail: "Geeks for Geeks rocks" }, { severity: "warn" , summary: "Warning " , detail: "Alert Message" }, { severity: "error" , summary: "Error " , detail: "Report Bug!!" } ]; } } |
Выход:
Пример 2. В этом примере описывается массив сообщений Angular PrimeNG.
- app.component.html
HTML
< div style = "margin:100px;" > < h1 style = "color: green" >GeeksforGeeks</ h1 > < h3 >Angular PrimeNG Messages Array</ h3 > < button pButton type = "button" label = "Show" class = "p-button-success" (click)="show()"> </ button > < button pButton type = "button" label = "Hide" class = "p-button-warning" (click)="hide()"> </ button > < p-messages [(value)]="gfg" [enableService]="false" [closable]="false"> </ p-messages > </ div > |
- app.module.ts
Javascript
import { NgModule } from "@angular/core" ; import { BrowserModule } from "@angular/platform-browser" ; import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ; import { AppComponent } from "./app.component" ; import { ButtonModule } from "primeng/button" ; import { MessagesModule } from "primeng/messages" ; import { MessageModule } from "primeng/message" ; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, MessageModule, MessagesModule, ButtonModule, BrowserAnimationsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
- app.component.ts
Javascript
import { Component } from "@angular/core" ; import { Message } from "primeng/api" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" , }) export class AppComponent { gfg: Message[] = []; show() { this .gfg = [ { severity: "success" , summary: "Success " , detail: "Geeks for Geeks rocks" } ]; } hide() { this .gfg = []; } } |
Выход:
Ссылка: https://primefaces.org/primeng/messages