Статическое содержимое сообщений Angular PrimeNG

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

Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы увидим статическое содержимое в компоненте сообщений в Angular PrimeNG.

Компонент «Сообщения» используется для отображения сообщения с определенной серьезностью. Для отображения статического содержимого пользователь может использовать шаблон сообщения. Служба сообщений игнорируется, и нет необходимости присваивать какое-либо значение.

Синтаксис:

<p-messages severity="info">
   <ng-template pTemplate>
       ...
   </ng-template>
</p-messages>

Создание приложения 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 style="margin:100px;">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>Angular PrimeNG Messages Static Content</h3>
    <p-messages severity="success">
        <ng-template pTemplate>
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg"
                 width="32" />
            <div class="ml-2">Geeks For Geeks</div>
        </ng-template>
    </p-messages>
</div>

app.component.ts

Javascript

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

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 { ToastModule } from "primeng/toast";
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        MessagesModule,
        ToastModule,
        BrowserAnimationsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Выход:

Пример 2: В этом примере описывается статическое содержимое сообщений Angular PrimeNG.

app.component.html

Javascript

<div style="margin:100px;">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>Angular PrimeNG Messages Static Content</h3>
    <p-messages severity="error">
        <ng-template pTemplate>
            <i class="pi pi-times-circle pi-spin"></i>
            <div class="ml-2">Error occurred</div>
        </ng-template>
    </p-messages>
    <p-messages severity="info">
        <ng-template pTemplate>
            <div class="ml-2">Information received</div>
            <i class="pi pi-info-circle pi-spin"></i>
        </ng-template>
    </p-messages>
    <p-messages severity="warn">
        <ng-template pTemplate>
            <i class="pi pi-exclamation-triangle pi-spin"></i>
            <div class="ml-2">Alert message</div>
        </ng-template>
    </p-messages>
</div>

app.component.ts

Javascript

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

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 { ToastModule } from "primeng/toast";
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        MessagesModule,
        ToastModule,
        BrowserAnimationsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Выход:

Ссылка: https://primefaces.org/primeng/messages

Technical Scripter Picked AngularJS

Статическое содержимое сообщений Angular PrimeNG

HTML

Javascript

Javascript

Javascript

Javascript

Javascript

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