Метка кнопки Angular PrimeNG

Опубликовано: 3 Января, 2023

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

Компонент Button используется для выполнения некоторых действий при нажатии. Свойство label компонента кнопки используется для установки текста кнопки.

Свойства метки кнопки Angular PrimeNG:

label: Свойство label используется для установки текста кнопки.
icon: это свойство компонента кнопки используется для установки значка кнопки. Его можно использовать со свойством label или без него.

Синтаксис:

<button pButton
   type="button" 
   label="..." >
</button>

Создание приложения Angular и установка модуля:

Шаг 1: Создайте приложение Angular, используя следующую команду.

ng new appname

Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.

cd appname

Шаг 3: Установите PrimeNG в указанный вами каталог.

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

Структура проекта будет выглядеть следующим образом после выполнения вышеуказанных шагов:

Пример 1. В этом примере показано использование свойства label для задания текста кнопки.

app.component.html

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>Angular PrimeNG Button Label</h3>
</div>
<div class="buttons">
  <button pButton type="button" 
    label="Label for First Button">
  </button>
  
  <button pButton type="button" 
    label="Label for Second Button">
  </button>
</div>

app.component.css

div{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
  
.header h2{
    margin-bottom: 0;
    color: green;
}
  
button{
    margin-bottom: 10px;
}

app.component.ts

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

app.module.ts

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

Запустите приведенную ниже команду, чтобы увидеть результат.

ng serve --open

Выход:

Пример 2. Свойство label также можно использовать со свойством icon. В этом примере показано использование свойства label со свойством icon .

app.component.html

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>Angular PrimeNG Button Label</h3>
</div>
<div class="buttons">
    <button 
        pButton 
        type="button" 
        icon="pi pi-check" 
        label="Label with left Icon" 
        iconPos="left">
    </button>
    
    <button 
        pButton 
        type="button" 
        icon="pi pi-check" 
        label="Label with right Icon" 
        iconPos="right">
      </button>
</div>

app.component.css

div{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
  
.header h2{
    margin-bottom: 0;
    color: green;
}
  
button{
    margin-bottom: 10px;
}

app.component.ts

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

app.module.ts

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

Выход:

Ссылка: http://primefaces.org/primeng/button

Picked AngularJS

Метка кнопки Angular PrimeNG

app.component.html

app.component.css

app.component.ts

app.module.ts

app.component.html

app.component.css

app.component.ts

app.module.ts

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