Angular PrimeNG消息内联消息

Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式网站，非常方便。在这篇文章中，我们将看到如何在Angular PrimeNG中使用**Messages Inline Message **.我们还将了解代码中将要使用的属性及其语法。

消息组件用于显示具有特别严重性的消息。内联消息一般是内联显示，主要是在表格内。

语法:

 <p-message 
     severity="..." 
     text="..." 
     styleClass="...">
</p-message>

Angular PrimeNG Messages Inline Message属性：

styleClass。它设置组件的风格类。它是字符串数据类型，默认值为空。
severity。它用于指定消息的严重性等级。它是字符串数据类型，默认值为空。
text。它用于设置文本内容。它是字符串数据类型，默认值为空。

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

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步在你给定的目录中安装PrimeNG。

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

项目结构：它将看起来像如下。

Angular PrimeNG消息内联消息

运行下面的命令可以看到输出。

ng serve --open

例子1：下面是说明使用Angular PrimeNG Messages Inline Message的例子代码。

<div style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h5>Angular PrimeNG Inline Message</h5>
  
    <p-message severity="info" 
               text="Info GeeksforGeeks" 
               styleClass="p-mr-3">
    </p-message>
  
    <p-message severity="success" 
               text="Success GeeksforGeeks" 
               styleClass="p-mr-3">
    </p-message>
  
    <p-message severity="warn" 
               text="Warn GeeksforGeeks" 
               styleClass="p-mr-2 p-mt-3">
    </p-message>
  
    <p-message severity="error" 
               text="Error GeeksforGeeks" 
               styleClass="p-mr-4 p-mt-3">
    </p-message>
</div>

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

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {MessageModule} from 'primeng/message';
import { AppComponent } from './app.component';
  
@NgModule({
  imports: [
    BrowserModule,
    MessageModule
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule {}

输出:

Angular PrimeNG消息内联消息

例子2：下面是另一个例子，说明了Angular PrimeNG Messages Inline Message。

<div style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h5>Angular PrimeNG Inline Message</h5>
    
    <div class="p-mt-4">
        <input 
            type="email" 
            pInputText 
            placeholder="Email" 
            class="ng-dirty 
            ng-invalid p-mr-3">
  
        <p-message 
            severity="error" 
            text="Geek! This field is required">
        </p-message>
    </div>
  
    <div class="p-mt-4">
        <input 
            type="password" 
            pInputText 
            placeholder="Password" 
            class="ng-dirty 
            ng-invalid p-mr-2">
  
        <p-message 
            severity="error"
            text="Geek! Password in incorrect">
        </p-message>
    </div>
</div>

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

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MessageModule } from 'primeng/message';
import { AppComponent } from './app.component';
import { InputTextModule } from 'primeng/inputtext';
  
@NgModule({
  imports: [
    BrowserModule,
    MessageModule,
    InputTextModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出:

Angular PrimeNG消息内联消息