Angular PrimeNG Form Rating Компонент только для чтения
Angular PrimeNG — это библиотека с открытым исходным кодом, состоящая из собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и эта структура используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы рассмотрим компонент Angular PrimeNG Form Rating ReadOnly.
Компонент «Рейтинг формы» — это вход для выбора, основанный на значке звездочки. Обычно его можно увидеть на страницах продуктов таких сайтов электронной коммерции, как Amazon, Flipkart, Alibaba и т. д.
Синтаксис:
<p-rating [ngModel]="..." stars="..." readonly="true" iconCancelClass="..."> </p-rating>
Свойства компонента только для чтения Angular PrimeNG Form Rating:
- звездочки: указывает количество отображаемых звездочек. Это числовой тип данных, значение по умолчанию равно 5.
- iconCancelClass: используется для установки класса значка «отмена». Это строковый тип данных, значение по умолчанию — pi pi-ban.
- только для чтения: мы не можем изменить значение компонента. Это логический тип данных, значение по умолчанию — false.
Создание приложения Angular и установка модуля:
Шаг 1: Создайте приложение Angular, используя следующую команду.
ng new appname
Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.
cd appname
Шаг 3: Наконец, установите PrimeNG в указанный вами каталог.
npm install primeng --save npm install primeicons --save
Структура проекта: Структура проекта будет выглядеть следующим образом после выполнения вышеуказанных шагов:
Чтобы запустить указанный выше файл, выполните следующую команду:
ng serve --save
Пример 1. Ниже приведен пример кода, иллюстрирующий использование компонента Angular PrimeNG Form Rating ReadOnly.
- приложение.component.html:
HTML
< h1 style = "color: green" >GeeksforGeeks</ h1 > < h5 >Angular PrimeNG Form ReadOnly Component</ h5 > < p-rating [ngModel]="gfg" stars = "5" readonly = "true" iconCancelClass = "pi pi-times" > </ p-rating > |
- app.component.ts:
Javascript
import { Component } from "@angular/core" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" }) export class AppComponent { gfg: number = 4; } |
- app.module.ts:
Javascript
import { NgModule } from "@angular/core" ; import { BrowserModule } from "@angular/platform-browser" ; import { FormsModule } from "@angular/forms" ; import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ; import { AppComponent } from "./app.component" ; import {RatingModule} from "primeng/rating" ; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, RatingModule, FormsModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } |
Выход:
Пример 2: Ниже приведен еще один пример кода, который иллюстрирует использование компонента Angular PrimeNG Form Rating ReadOnly без значка отмены.
- приложение.component.html:
HTML
< h1 style = "color: green" >GeeksforGeeks</ h1 > < h5 >Angular PrimeNG Form ReadOnly Component</ h5 > < p-rating [ngModel]="gfg" stars = "8" readonly = "true" [cancel]="false"> </ p-rating > |
- app.component.ts:
Javascript
import { Component } from "@angular/core" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" }) export class AppComponent { gfg: number = 4; } |
- app.module.ts:
Javascript
import { NgModule } from "@angular/core" ; import { BrowserModule } from "@angular/platform-browser" ; import { FormsModule } from "@angular/forms" ; import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ; import { AppComponent } from "./app.component" ; import {RatingModule} from "primeng/rating" ; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, RatingModule, FormsModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } |
Выход:
Ссылка: https://primefaces.org/primeng/rating