Компонент Angular PrimeNG ProgressBar

Опубликовано: 21 Августа, 2022

Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы узнаем, как использовать компонент progressBar в Angular PrimeNG. Мы также узнаем о свойствах, стиле и их синтаксисе, которые будут использоваться в коде.

Компонент ProgressBar: используется для создания панели, отображающей статус процесса.

Характеристики:

value: указывает текущее значение прогресса. Он принимает числовой тип данных, значение по умолчанию равно null.
showValue: указывает, показывать или скрывать значение индикатора выполнения. Это логический тип данных, значение по умолчанию — true.
единица измерения: указывает знак единицы измерения, добавляемый к значению. Это строковый тип данных, значение по умолчанию — %.
режим: указывает режим прогресса, допустимые значения — «определенный» и «неопределенный». Это строковый тип данных, значение по умолчанию — детерминированное.

Стиль:

p-progressbar: это элемент-контейнер.
p-progressbar-determinate: это элемент-контейнер детерминированного индикатора выполнения.
p-progressbar-indeterminate: это элемент-контейнер неопределенного индикатора выполнения.
p-progressbar-value: это элемент, ширина которого изменяется в зависимости от значения.
p-progressbar-label: это элемент метки, отображающий текущее значение.

Создание приложения Angular и установка модуля:

Шаг 1: Создайте приложение Angular, используя следующую команду.

ng new appname

Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.

cd appname

Шаг 3 : Установите PrimeNG в указанный вами каталог.

npm install primeng --save
npm install primeicons --save

Структура проекта : После полной установки он будет выглядеть следующим образом:

Пример 1. Это базовый пример, иллюстрирующий использование компонента ProgressBar.

app.component.html

<h2>GeeksforGeeks</h2>
<h5>PrimeNG ProgressBar Component</h5>
<h5>Static Progress Bar</h5>
<p-progressBar [value]="30"></p-progressBar>
<h5>Indeterminate Progress Bar</h5>
<p-progressBar mode="indeterminate" 
               [style]="{"height": "6px"}">
</p-progressBar>

app.component.ts

import { Component } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html"
})
export class AppComponent {}

app.module.ts

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 { ProgressBarModule } from "primeng/progressbar";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ProgressBarModule,
    FormsModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Выход:

Пример 2. В этом примере мы создадим динамический компонент индикатора выполнения, который будет обновляться случайным образом, а также отображаться со значением состояния выполнения и без него.

app.component.html

<h1>GeeksforGeeks</h1>
<h4>PrimeNG ProgressBar Component</h4>
<div class="card">
  <h5>Dynamic (with status value)</h5>
  <p-progressBar [value]="gfg1"></p-progressBar>
  <h5>Dynamic (without status value)</h5>
  <p-progressBar [showValue]="false" [value]="gfg2"></p-progressBar>
</div>

app.component.ts

import { Component } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html"
})
export class AppComponent {
  gfg1: number = 0;
  gfg2: number = 0;
  
  ngOnInit() {
    setInterval(() => {
      this.gfg1 = this.gfg1 + Math.floor(Math.random() * 10) + 1;
      if (this.gfg1 >= 100) {
        this.gfg1 = 100;
      }
    }, 1500),
      setInterval(() => {
        this.gfg2 = this.gfg2 + Math.floor(Math.random() * 10) + 3;
        if (this.gfg2 >= 100) {
          this.gfg2 = 100;
        }
      }, 1500);
  }
}

app.module.ts

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 { ProgressBarModule } from "primeng/progressbar";
  
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ProgressBarModule,
    FormsModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Выход:

Ссылка: https://primefaces.org/primeng/showcase/#/progressbar

AngularJS

Компонент Angular PrimeNG ProgressBar

app.component.html

app.component.ts

app.module.ts

app.component.html

app.component.ts

app.module.ts

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