Angular PrimeNG Form Rating Компонент только для чтения

Опубликовано: 20 Февраля, 2023

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

Technical Scripter Picked AngularJS

Angular PrimeNG Form Rating Компонент только для чтения

HTML

Javascript

Javascript

HTML

Javascript

Javascript

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