کنترل CheckBox متریال در انگولار ۷ – آموزش انگولار متریال

کنترل CheckBox متریال در انگولار ۷

<mat-checkbox> یک دستورالعمل انگولار است که به منظور ایجاد چک باکس هایی با تم و استایل متریال دیزاین استفاده می شود. در این بخش ما چگونگی پیکربندی لازم به منظور ایجاد یک کنترل checkbox را بررسی خواهیم کرد.

ایجاد برنامه انگولار

در ادامه برنامه ای که در بخش ایجاد پروژه در انگولار ۷ ایجاد کرده بودیم را برای استفاده از کنترل autocomplete تغییر می دهیم.

محتوای فایل 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 { }

محتوای فایل 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>

محتوای فایل app.component.css:

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

کد زیر مربوط به فایل ویرایش شده 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;
}

نتیجه

بعد از اجرا برنامه خروجی زیر را مشاهده خواهید کرد:

جزئیات

• ما ابتدا با استفاده از mat-checkbox چند کنترل checkbox ایجاد و سپس با استفاده از ngModel مقدار آن ها را به متغیرهای تعریف شده در کامپوننت بایند کرده ایم.
• سپس یک کنترل checkbox دیگر ایجاد و مقدار متغیرهای موجود در فایل .ts را به آن بایند کردیم.

نوشته کنترل CheckBox متریال در انگولار ۷ – آموزش انگولار متریال اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.