Цель Angular PrimeNG StyleClass

Опубликовано: 29 Декабря, 2022

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

StyleClass используется для управления классами CSS во время входа или выхода из анимации или просто для переключения класса на элемент без анимации. Чтобы настроить таргетинг на элемент, мы можем использовать селектор CSS или целевые ключевые слова, предоставленные PrimeNG в качестве значения свойства pStyleClass. Всего имеется 4 целевых ключевых слова.

Целевые ключевые слова StyleClass для свойства pStyleClass:

@next: указывает на следующий элемент текущего элемента.
@prev: указывает на следующий элемент текущего элемента.
@parent: указывает на родительский элемент.
@grandparent: нацеливается на элемент grandparent (родитель родительского элемента).

Синтаксис:

<button 
     pButton
     label="..." 
     pStyleClass="@next"
     ...
></button>

<div class="..."> ... </div>

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

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

ng new app

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

cd app

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

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

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

Запустите следующую команду:

ng serve --open

Пример 1: В этом примере показано использование свойства toggleClass класса StyleClass. Здесь мы использовали ключевое слово @next для перехода к следующему элементу.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG StyleClass Target</h4>
  
<button 
    pButton 
    label="Disable Next Button" 
    pStyleClass="@next" 
    toggleClass="p-disabled">
</button>
  
<button
    pButton 
    label="Button" 
    class="p-button-success mt-4">
</button>

app.component.ts

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: [
        `
        button{
            display: block;
        }
        `
    ]
})
  
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 { ButtonModule } from "primeng/button";
import { StyleClassModule } from "primeng/styleclass";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ButtonModule,
        StyleClassModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule { }

Выход:

Пример 2. В этом примере мы использовали ключевое слово @prev target, чтобы выбрать предыдущий элемент и отключить его.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG StyleClass Target</h4>
  
<input pInputText class="input" type="text" />
  
<button
    pButton 
    label="Disable Previous Input"
    pStyleClass="@prev" 
    toggleClass="p-disabled" >
</button>

app.component.ts

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: [
        `
        button{
            display: block;
            margin-top: 15px;
        }
        `
    ]
})
  
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 { ButtonModule } from "primeng/button";
import { InputTextModule } from "primeng/inputtext";
import { StyleClassModule } from "primeng/styleclass";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ButtonModule,
        InputTextModule,
        StyleClassModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule { }

Выход:

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

Picked AngularJS

Цель Angular PrimeNG StyleClass

app.component.html

app.component.ts

app.module.ts

app.component.html

app.component.ts

app.module.ts

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