Angular ngx 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, sabremos cómo usar Progressbar en angular ngx bootstrap. Progressbar se utiliza para proporcionar comentarios actualizados sobre el progreso del trabajo.
Sintaxis de instalación:
npm install ngx-bootstrap --save
Acercarse:
- Primero, instale el bootstrap angular ngx 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”>
- Importar componente de barra de progreso en module.ts
- En app.component.html crea un componente de barra de progreso.
- Sirve la aplicación usando ng serve.
Ejemplo:
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <base href="/" /> <meta name="viewport" content= "width=device-width, initial-scale=1" /> <link href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> <link rel="icon" type="image/x-icon" href="favicon.ico" /> <link rel="preconnect" href="https://fonts.gstatic.com" /> <link href= "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> </head> <body class="mat-typography"> <app-root></app-root> </body> </html>
app.component.html
<div class="column"> <div class="col-sm-4"> <div class="mb-2"> <progressbar [max]="100" [value]="27" type="success" [striped]="true" [animate]="true">27 </progressbar> </div> </div> <br /> <div class="col-sm-4"> <div class="mb-2"> <progressbar [max]="140" [value]="49" type="warning" [animate]="true" [striped]="true">49% </progressbar> </div> </div> <br /> <div class="col-sm-4"> <div class="mb-2"> <progressbar [max]="140" [value]="40" type="danger" [striped]="true" [animate]="true"> 166 / 200 </progressbar> </div> </div> </div>
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 { ProgressbarModule }
from 'ngx-bootstrap/progressbar';
import { AppComponent } from './app.component';
@NgModule({
bootstrap: [
AppComponent
],
declarations: [
AppComponent
],
imports: [
FormsModule,
BrowserModule,
BrowserAnimationsModule,
ReactiveFormsModule,
ProgressbarModule.forRoot()
]
})
export class AppModule { }
app.component.css
.column{
margin: 30px;
}
app.component.ts
import { Component, OnInit,LOCALE_ID } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
Producción:
Referencia: https://valor-software.com/ngx-bootstrap/progressbar