Angular PrimeNG消息静态内容

Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式网站非常容易。在这篇文章中，我们将看到Angular PrimeNG中信息组件的静态内容。

消息组件用于显示具有特别严重性的消息。为了显示静态内容，用户可以利用消息模板。消息服务被忽略，不需要分配任何值。

语法:

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

创建Angular应用程序和模块安装。

第1步：要创建一个angular应用程序，你需要通过npm命令安装angular命令行接口。

npm install -g angular-cli

第2步 。现在，我们将创建一个angular项目。

ng new project_name

第3步：在创建你的angular项目后，进入文件夹执行不同的操作。

cd project_name

第4步 。创建Angular应用程序后，使用以下命令安装所需模块。

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

项目结构：安装成功后，将出现以下项目结构。

Angular PrimeNG消息静态内容

Project Structure

运行应用程序的步骤。在项目的根目录下使用以下命令运行应用程序。

ng serve --open

例子1：这个例子描述了Angular PrimeNG Messages静态内容。

app.component.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

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

app.module.ts

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 { }

输出:

Angular PrimeNG消息静态内容

例子2：这个例子描述了Angular PrimeNG **Messages静态内容。

app.component.html

<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 occured</div>
        </ng-template>
    </p-messages>
    <p-messages severity="info">
        <ng-template pTemplate>
            <div class="ml-2">Information recieved</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

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

app.module.ts

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 { }

输出:

Angular PrimeNG消息静态内容