Angular Material是Angular团队开发的一个UI组件库,用于为台式机和移动Web应用程序构建设计组件。
为了安装它,我们需要在项目中安装angular,一旦安装,您可以输入以下命令并下载。
安装语法:
ng add @angular/material
方法:
- 首先,使用上述命令安装角材。
- 完成安装后,从app.module.ts文件中的’@ angular / material’导入’MatButtonToggleModule’。
- 然后使用
和 mat-button-toggle>标记创建角度按钮切换组。 - 由于MatButtonToggleModule不包含只读属性,因此我们可以使用disabled属性将其设置为只读。
- 完成上述步骤后,即可服务或启动项目。
代码实现:
app.module.ts:
Javascript
import { NgModule } from '@angular/core';
import { BrowserModule } from
'@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from
'@angular/platform-browser/animations';
import { MatButtonModule } from
'@angular/material/button';
import { MatButtonToggleModule } from
'@angular/material/button-toggle';
@NgModule({
imports: [ BrowserModule,
FormsModule,
BrowserAnimationsModule,
MatButtonModule,
MatButtonToggleModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
HTML
HTML
CSS
Javascript
Jquery
app.component.html:
的HTML
HTML
CSS
Javascript
Jquery
输出:
观察:如果您清楚地观察到上述输出,则可以理解您无法选择,这就是只读属性的样子。