Angular ng bootstrap es un marco de arranque que se usa con angular para crear componentes con un gran estilo y este marco es muy fácil de usar y se usa para crear sitios web receptivos.
En este artículo, veremos cómo usar Rating en angular ng bootstrap. El componente de clasificación se utiliza para crear un componente que se mostrará mediante el uso de estrellas.
Sintaxis de instalación:
ng add @ng-bootstrap/ng-bootstrap
Acercarse:
- Primero, instale el bootstrap angular ng usando el comando mencionado anteriormente.
- Agregue el siguiente script en index.html
<enlace href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” rel=”hoja de estilo”>
- Importe el módulo de arranque ng en module.ts
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; imports: [ NgbModule ] - En app.component.html, cree un componente de calificación.
- Sirve la aplicación usando ng serve.
Ejemplo 1: En este ejemplo, estamos haciendo un ejemplo básico de calificación.
app.component.html
<ngb-rating [(rate)]="gfg"></ngb-rating>
<pre>GeeksforGeeks: <b>{{gfg}}</b></pre>
app.module.ts
import { NgModule } from '@angular/core';
// Importing forms module
import { FormsModule, ReactiveFormsModule }
from '@angular/forms';
import { BrowserModule }
from '@angular/platform-browser';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { NgbModule }
from '@ng-bootstrap/ng-bootstrap';
@NgModule({
bootstrap: [
AppComponent
],
declarations: [
AppComponent
],
imports: [
FormsModule,
BrowserModule,
BrowserAnimationsModule,
ReactiveFormsModule,
NgbModule
]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
gfg = 5;
}
Producción:
Ejemplo 2: En este ejemplo, hemos establecido la clasificación en solo lectura.
app.component.html
<ngb-rating [(rate)]="gfg" [readonly]='true'></ngb-rating>
<pre>GeeksforGeeks: <b>{{gfg}}</b></pre>
app.module.ts
import { NgModule } from '@angular/core';
// Importing forms module
import { FormsModule, ReactiveFormsModule }
from '@angular/forms';
import { BrowserModule }
from '@angular/platform-browser';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { NgbModule }
from '@ng-bootstrap/ng-bootstrap';
@NgModule({
bootstrap: [
AppComponent
],
declarations: [
AppComponent
],
imports: [
FormsModule,
BrowserModule,
BrowserAnimationsModule,
ReactiveFormsModule,
NgbModule
]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
gfg = 5;
}
Producción:
Referencia: https://ng-bootstrap.github.io/#/components/rating/examples