Angular ng Bootstrap Componente de barra de progreso

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 Progressbar en angular ng bootstrap. El componente Progressbar se utiliza para proporcionar comentarios actualizados sobre el progreso del trabajo.

Sintaxis de instalación:

ng add @ng-bootstrap/ng-bootstrap

Acercarse:

• Primero, instale el bootstrap angular ng usando el comando mencionado anteriormente.
• 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 barra de progreso.
• Sirve la aplicación usando ng serve.

Ejemplo 1: En este ejemplo, estamos haciendo un ejemplo básico de barra de progreso.

<br/>
<p><ngb-progressbar type="success" [value]="14">
    14
</ngb-progressbar></p>
<br/>
  
<p><ngb-progressbar type="info" [value]="33">
    33
</ngb-progressbar></p>
<br/>
  
<p><ngb-progressbar type="warning" [value]="55">
    55
</ngb-progressbar></p>
<br/>
  
<p><ngb-progressbar type="danger" [value]="45">
    45
</ngb-progressbar></p>
<br/>
  
<p><ngb-progressbar type="primary" [value]="68">
    68
</ngb-progressbar></p>
<br/>
  
<p><ngb-progressbar type="secondary" [value]="10">
    10
</ngb-progressbar></p>

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 { }

Producción:

Ejemplo 2: En este ejemplo, estamos creando una barra de progreso con franjas y animación establecida en verdadero.

<br/>
  
<p><ngb-progressbar 
    type="success" 
    [value]="14" 
    [striped]="true" 
    [animated]="true" >14
</ngb-progressbar></p>
<br/>
  
<p><ngb-progressbar 
    type="info"
    [value]="33" 
    [striped]="true" 
    [animated]="true" >33
</ngb-progressbar></p>
<br/>
  
<p><ngb-progressbar 
    type="warning"
    [value]="55"
    [striped]="true" 
    [animated]="true" >55
</ngb-progressbar></p>
<br/>
  
<p><ngb-progressbar 
    type="danger" 
    [value]="45"
    [striped]="true" 
    [animated]="true" >45
</ngb-progressbar></p>
<br/>
  
<p><ngb-progressbar 
    type="primary" 
    [value]="68" 
    [striped]="true" 
    [animated]="true" >68
</ngb-progressbar></p>
<br/>
  
<p><ngb-progressbar 
    type="secondary"
    [value]="10" 
    [striped]="true" 
    [animated]="true" >10
</ngb-progressbar></p>

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 { }

Producción:

Referencia: https://ng-bootstrap.github.io/#/components/progressbar/examples