Angular Material进度条的定义
Angular Material为我们提供了进度条，它可以帮助我们跟踪活动，也就是告诉我们该活动的进度。我们将用一些颜色来填充进度条以跟踪任务的活动。Angular material通过为进度条添加默认的样式和设计，使其更具吸引力和用户友好。此外，我们还可以使用材料库提供的内建模块和指令来实现这一点。为了使用它，我们将对Angular应用程序进行一些配置，我们将在接下来的章节中详细说明，以便更好地理解和明确。
语法。
在这一节中，我们将仔细看看这个语法，我们基本上使用了angular material本身提供的指令，所以让我们开始详细了解吧
<mat-progress-bar mode="your_mode" value="your_value"></mat-progress-bar>
正如你所看到的，我们试图使用'mat-progress-bar'来创建进度条，我们还必须指定进度条的模式，我们将在接下来的章节中详细讨论，以便更好地理解。
如何在Angular Material中创建进度条？
现在我们已经知道，通过使用Angular材料的进度条，我们可以很容易地向用户说明任务或活动的进度。这可以帮助用户指定任务完成所需的时间，它使用户的等待过程有一点互动性，他们也知道这个过程需要时间来完成，而且是在后台进行的。在材料库中，我们有构建模块，可以帮助我们轻松地创建这个进度条，所以让我们开始吧。
1.MatProgressBarModule
这个模块是由素材库提供的，它可以帮助我们轻松而快速地创建进度条。我们需要在我们的根模块或任何我们想创建进度条的子模块中导入这个模块。请看下面的代码，以供参考。
例子。
import {MatProgressBarModule} from '@angular/material/progress-bar';
使用上面的代码，因为它是在你的根模块类中。
2. Mat-progress-bar
现在我们有了 "mat-progress-bar "这个选择器，为什么在HTML或Template上使用这个标签，我们可以根据我们的需要呈现进度条。在这之前，让我们仔细看看进度条的不同模式的细节。
- a) 确定的
- b) 不确定模式
- c) 缓冲
- d) 查询
现在，让我们开始进行需要采取的步骤，以初步加强我们的angular material项目，对于初学者来说，见下文。
- 首先，安装angular CLI，使我们能够为我们的项目下载所需的包和库。你可以通过在你的命令中输入以下命令来下载它，确保你已经安装了node，见下文。
例子。
npm install -g @angular/cli)
上述命令将在我们的系统中全局安装CLI，因此我们可以在需要时全局使用它。
- 在这一步，我们将尝试从头开始创建一个新的angular项目，这个项目将不是一个材料项目，我们必须通过在我们的项目中安装材料依赖来添加。
例子。
ng new your project name >> ng new my-first-project
这个命令将创建一个名为my-first-project的项目，你可以用任何名字创建你的项目。
- 为了确定，请尝试下面提到的一个命令，将所有需要的库安装到我们的项目中。
例子。
npm install
- 现在你可以通过输入下面提到的简单命令来测试和运行你的项目。这只是为了确保我们在正确的轨道上，我们的项目已经创建，没有任何错误或错误的地方。
例子。
ng serve
- 在浏览器上尝试运行以下URL的应用程序。
例子。
默认情况下，angular项目运行在4200端口，如果需要，你可以根据你的需要来改变它。
- 现在一切都设置好了，我们有了angular项目，现在我们将通过在命令提示符上运行下面的命令来添加材料库到我们的项目中。
例子。
ng add @angular/material
Angular材料进度条的例子
下面给出了angular材质进度条的例子。
1. demo.progress.component.ts代码。
import {Component} from '@angular/core'; import {ThemePalette} from '@angular/material/core'; import {ProgressBarMode} from '@angular/material/progress-bar'; /** * @title demo porgress bar */ @Component({ selector: 'progress-bar-demo', templateUrl: 'demo.progress.component.html', styleUrls: ['demo.progress.component.css'], }) export class DemoProgressBar { color: ThemePalette = 'primary'; mymode: ProgressBarMode = 'determinate'; myvalue = 30; mybufferValue = 56; }
2. demo.porgress.component.html代码。
<h3><u><i>Progress bar demo using angular material library !!</i></u></h3> <mat-card> <mat-card-content> <section class="example-section"> <label >Select Mode:</label> <mat-radio-group [(ngModel)]="mymode"> <mat-radio-button value="determinate"> Determinate </mat-radio-button> <mat-radio-button value="indeterminate"> Indeterminate </mat-radio-button> <mat-radio-button value="buffer"> Buffer </mat-radio-button> <mat-radio-button value="query"> Query </mat-radio-button> </mat-radio-group> </section> <section *ngIf="mymode === 'determinate' || mymode === 'buffer'"> <label class="example-margin">Move Progress:</label> <mat-slider class="example-margin" [(ngModel)]="myvalue"></mat-slider> </section> <section class="example-section" *ngIf="mymode === 'buffer'"> <label class="example-margin">Buffer Progress:</label> <mat-slider class="example-margin" [(ngModel)]="mybufferValue"></mat-slider> </section> </mat-card-content> </mat-card> <br/> <mat-card> <mat-card-content> <h2><u><i>Progress Result : </i></u></h2> <section > <mat-progress-bar [color]="color" [mode]="mymode" [value]="myvalue" [bufferValue]="mybufferValue"> </mat-progress-bar> </section> </mat-card-content> </mat-card>
3. module.ts代码。
import {NgModule} from '@angular/core'; import {MatProgressBarModule} from '@angular/material/progress-bar'; import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; @NgModule({ exports: [ MatProgressBarModule, MatProgressSpinnerModule, ] }) export class DemoProgressBarModule {}
4. index.html代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet"> <title>Demo progress bar</title> </head> <body class="mat-app-background"> <progress-bar-demo>Loading..</progress-bar-demo> <span class="version-info">Current build: 12.1.1</span> </body> </html>
每个模式的输出。
确定性模式。
不确定的模式:
缓冲模式。
查询模式。
结论
我们已经讨论了进度条的用法和实现，这个材料使我们很容易实现它。而且，我们只需要指定正确的模块并导入，直接在模板上使用tis。它很容易使用，实现，并可由开发人员维护。
推荐文章
这是一个关于Angular Material Progress Bar的指南。在这里，我们也讨论了定义和如何在Angular Material中创建进度条，并附有一个例子。你也可以看看下面的文章，以了解更多信息
The postAngular Material Progress Barappeared first onEDUCBA.
