Массив сообщений Angular PrimeNG

Опубликовано: 23 Февраля, 2023

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

Technical Scripter Picked AngularJS

Массив сообщений Angular PrimeNG

HTML

Javascript

Javascript

HTML

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ