<mat-checkbox> в Angular Material

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

Angular Material — это библиотека компонентов пользовательского интерфейса, разработанная командой Angular для создания компонентов дизайна для настольных и мобильных веб-приложений. Чтобы установить его, нам нужно установить angular в нашем проекте, как только он у вас будет, вы можете ввести приведенную ниже команду и загрузить его. <mat-checkbox> используется для проверки или выбора всякий раз, когда у нас есть несколько вариантов для выбора.

Синтаксис установки:

ng add @angular/material

Подход:

Сначала установите угловой материал с помощью вышеупомянутой команды.
После завершения установки импортируйте «MatCheckboxModule» из «@angular/material/checkbox» в файл app.module.ts.
Затем нам нужно использовать тег <mat-checkbox> для отображения флажка.
Мы также можем отключить флажок, используя свойство disabled input.
Если мы хотим изменить тему, мы можем изменить ее, используя свойство цвета. В angular у нас есть 3 темы: основная, акцентная и предупредительная.
Выполнив вышеуказанные шаги, подайте или запустите проект.

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

app.module.ts

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

app.component.html

<mat-checkbox color="primary"> 
  Primary theme checkbox
</mat-checkbox>
  
<br>
<br>
  
<mat-checkbox color="accent"> 
  Accent theme checkbox
</mat-checkbox>
  
<br>
<br>
  
<mat-checkbox color="warn"> 
  Warn theme checkbox
</mat-checkbox>
  
<br>
<br>
  
<mat-checkbox color="warn" disabled> 
  Disabled  checkbox
</mat-checkbox>
  
<br>
<br>
  
<mat-checkbox color="primary" indeterminate="true"> 
  Indeterminate  checkbox
</mat-checkbox>

Выход:

AngularJS

<mat-checkbox> в Angular Material

app.module.ts

app.component.html

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