Индикатор выполнения углового материала

Опубликовано: 21 Февраля, 2023

Angular Material — это библиотека пользовательского интерфейса (UI) из набора компонентов для разработчиков AngularJS. Он состоит из ряда высококачественных, интернационализированных, многоразовых и доступных для разработчиков компонентов. Эта библиотека содержит предварительно разработанные компоненты и элементы, которые можно напрямую использовать для выполнения любых функций.

Индикатор выполнения — это компонент, предоставляемый библиотекой Angular Material, который используется для индикации прогресса в действии или отображения состояния любого конкретного задания, т. е. сообщает пользователю, сколько задач было выполнено, в виде линейки. Для создания индикатора прогресса мы можем использовать тег <mat-progress-bar> . В Progress Bar есть 4 различных режима, которые описаны ниже:

  • определить: используется для отображения общего процента выполнения конкретной задачи, т. е. того, какой прогресс был достигнут, что представляется визуально. Это режим по умолчанию, в котором прогресс отображается с помощью свойства value .
  • неопределенный: используется для отображения индикатора выполнения с неопределенным временем ожидания.
  • буфер: используется для обозначения активности загрузки, если она выполняется со стороны сервера.
  • запрос: используется для отображения непрерывно движущегося индикатора выполнения. Его можно использовать для отображения услуг предварительной загрузки.

Синтаксис:

<mat-progress-bar mode="" value=""></mat-progress-bar>

Синтаксис установки: основным предварительным условием для работы с модулями Angular Material является установка Angular CLI в нашей системе, чтобы мы могли использовать библиотеку пользовательского интерфейса Angular Material и ее компоненты. Вы можете использовать следующую команду для установки Angular CLI:

ng add @angular/material

Подробную процедуру установки см. в статье Добавление компонента Angular Material в приложение Angular.

Добавление компонента Progress Bar: чтобы разрешить использование компонента Progress Bar, нам нужно импортировать его в файл app.module.ts , затем нам нужно добавить компонент «MatProgressBarModule» в массив импорта «@NgModule».

import {MatProgressBarModule} from "@angular/material/progress-bar";

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

  • Создайте приложение Angular.js с помощью следующей команды:
ng new foldername
  • После создания папки проекта, то есть имени папки, перейдите в этот каталог с помощью следующей команды:
cd foldername
  • После создания приложения AngularJS установите необходимый модуль с помощью следующей команды:
ng add @angular/material

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

Пример 1: Этот пример иллюстрирует базовое использование индикатора выполнения Angular Material Progress Bar путем реализации детерминированного режима. Здесь мы будем использовать компонент « MatProgressBarModule ».

  • app.module.ts:

Javascript




import { NgModule } from "@angular/core";
import { BrowserModule } 
    from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { MatProgressBarModule } 
    from "@angular/material/progress-bar";
  
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        MatProgressBarModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

  • приложение.component.html:
HTML



<div style="width: 450px; 
            text-align:center">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h4>
        Angular Material Determinate
        Progress Bar
    </h4>
    <mat-progress-bar mode="determinate" 
                      value="40">
    </mat-progress-bar>
</div>
  • app.component.ts:
Javascript



import { Component } from "@angular/core";
  
@Component({
    selector: "my-app",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent {
    title = "folderName";
}
Шаги для запуска программы: Чтобы запустить приложение, выполните следующую команду из корневого каталога проекта:
ng serve
Вывод: ваше веб-приложение будет работать на «http://localhost:4200», как видно из следующего вывода:
Пример 2: В этом примере мы увидим индикатор выполнения в «неопределенном» режиме.
  • app.module.ts:
Javascript



import { NgModule } from "@angular/core";
import { BrowserModule } 
    from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { MatProgressBarModule } 
    from "@angular/material/progress-bar";
  
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        MatProgressBarModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
  • приложение.component.html:
HTML



<div style="width: 450px; 
            text-align:center">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h4>
        Angular Material Indeterminate
        Progress Bar
    </h4>
    <mat-progress-bar mode="indeterminate" 
                      value="40">
    </mat-progress-bar>
</div>
  • app.component.ts:
Javascript



import { Component } from "@angular/core";
  
@Component({
    selector: "my-app",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent {
    title = "folderName";
}
Выход:
Пример 3: В этом примере мы увидим индикатор выполнения в «буферном» режиме.
  • app.module.ts:
Javascript



import { NgModule } from "@angular/core";
import { BrowserModule } 
    from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { MatProgressBarModule } 
    from "@angular/material/progress-bar";
  
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        MatProgressBarModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
  • приложение.component.html:
HTML



<div style="width: 450px; 
            text-align:center">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h4>
        Angular Material Buffer
        Progress Bar
    </h4>
    <mat-progress-bar mode="buffer">
    </mat-progress-bar>
</div>
  • app.component.ts:
Javascript



import { Component } from "@angular/core";
  
@Component({
    selector: "my-app",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent {
    title = "folderName";
}
Выход:
Пример 4: В этом примере мы увидим индикатор выполнения в режиме «запрос».
  • app.module.ts:
Javascript



import { NgModule } from "@angular/core";
import { BrowserModule } 
    from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { MatProgressBarModule } 
    from "@angular/material/progress-bar";
  
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        MatProgressBarModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
  • приложение.component.html:
HTML



<div style="width: 450px; 
            text-align:center">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h4>
        Angular Material Buffer
        Progress Bar
    </h4>
    <mat-progress-bar mode="buffer">
    </mat-progress-bar>
</div>
  • app.component.ts:
Javascript



import { Component } from "@angular/core";
  
@Component({
    selector: "my-app",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent {
    title = "folderName";
}
Выход:
Ссылка: https://material.angular.io/components/progress-bar/overview

            

                            

                    
                                            Technical Scripter
                                            Picked
                                            AngularJS
                                    

                        

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

                

                                            

                            
Количество чисел между L и R, взаимно простых с P

                            
27 Февраля, 2023

                        

                                            

                            
Количество чисел между L и R, взаимно простых с P

                            
27 Февраля, 2023

                        

                                            

                            
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.

                            
27 Февраля, 2023

                        

                                            

                            
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.

                            
27 Февраля, 2023

                        

                                            

                            
Найдите все факторы заданного числа и их побитовое XOR

                            
27 Февраля, 2023

                        

                                            

                            
Показать самое длинное имя

                            
27 Февраля, 2023

                        

                                            

                            
Форматирование лицензионного ключа

                            
27 Февраля, 2023

                        

                                            

                            
Максимизируйте сумму трех чисел, выполнив побитовое XOR

                            
27 Февраля, 2023