Базовый компонент рейтинга форм Angular PrimeNG
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы узнаем, как использовать компонент Form Rating Basic в Angular PrimeNG. Давайте узнаем о свойствах, а также об их синтаксисе, который будет использоваться в коде.
Компонент «Рейтинг» используется для представления рейтинга, данного пользователем.
Синтаксис:
<p-rating iconCancelClass="..."></p-rating>
Angular PrimeNG Form Rating Основные свойства компонентов:
- iconCancelClass: используется для установки класса значка «отмена». Это строковый тип данных, значение по умолчанию — pi pi-ban.
Создание приложения 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.
- приложение.component.html:
HTML
< h1 style = "color: green" >GeeksforGeeks</ h1 > < h5 >Angualar PrimeNG Form Rating Basic Component</ h5 > < p-rating ></ p-rating > |
- app.component.ts:
Javascript
import { Component } from "@angular/core" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" }) export class AppComponent { } |
- 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 с другим значком отмены.
- приложение.component.html:
HTML
< h1 style = "color: green" >GeeksforGeeks</ h1 > < h5 >Angualar PrimeNG Form Rating Basic Component</ h5 > < p-rating 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 { } |
- 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