Açısal Malzeme 7 - CheckBox

<mat-checkbox>bir Açısal Yönerge, malzeme tasarım stili ve animasyon yetenekleriyle gelişmiş bir onay kutusu olarak kullanılır.

Bu bölümde, Açısal Malzemeyi kullanarak bir onay kutusu kontrolü çizmek için gereken yapılandırmayı göstereceğiz.

Açısal Uygulama Oluşturun

Angular 6 - Project Setup bölümünde oluşturduğumuz Angular uygulamasını güncellemek için aşağıdaki adımları izleyin -

Adım	Açıklama
1	Angular 6 - Project Setup bölümünde açıklandığı gibi materialApp adıyla bir proje oluşturun .
2	Değiştir app.module.ts , app.component.ts , app.component.css ve app.component.html olarak aşağıda açıklanmıştır. Geri kalan dosyaları değiştirmeden tutun.
3	Uygulanan mantığın sonucunu doğrulamak için uygulamayı derleyin ve çalıştırın.

Değiştirilmiş modül tanımlayıcısının içeriği aşağıdadır app.module.ts.

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

Aşağıda, değiştirilmiş HTML ana bilgisayar dosyasının içeriği verilmiştir app.component.html.

<h2 class = "tp-h2">Checkbox configuration</h2>
<section class = "tp-section">
   <mat-checkbox class = "tp-margin" [(ngModel)] = "checked">Checked</mat-checkbox>
   <mat-checkbox class = "tp-margin" [(ngModel)] = "indeterminate">Indeterminate</mat-checkbox>
</section> 
<section class = "tp-section">
   <mat-checkbox class = "tp-margin" [(ngModel)] = "disabled">Disabled</mat-checkbox>
</section>
<h2 class = "tp-h2">Result</h2>
<section class = "tp-section">
   <mat-checkbox
      class = "tp-margin"
      [(ngModel)] = "checked"
      [(indeterminate)] = "indeterminate"
      [labelPosition] = "labelPosition"
      [disabled] = "disabled">
      Sample Checkbox
   </mat-checkbox>
</section>

Aşağıda, değiştirilmiş CSS dosyasının içeriği verilmiştir app.component.css.

.tp-h2 {
   margin: 10px;
}
.tp-section {
   display: flex;
   align-content: center;
   align-items: center;
   height: 60px;
}
.tp-margin {
   margin: 0 10px;
}

Değiştirilen ts dosyasının içeriği aşağıdadır app.component.ts.

import { Component } from '@angular/core';
import { FormControl } from "@angular/forms";
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'materialApp';
   checked = false;
   indeterminate = false;
   labelPosition = 'after';
   disabled = false;
}

Sonuç

Sonucu doğrulayın.

Detaylar

• İlk olarak, mat-checkbox kullanarak üç onay kutusu oluşturduk ve değişkenlerle ngModel kullanarak bunları bağladık.

• Ardından, başka bir onay kutusu oluşturduk ve .ts dosyasındaki değişkenlerle bağlantılı çeşitli özniteliklerini gösterdik.