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

چهارشنبه ۲۰ شهریور ۱۳۹۸
بازدید ۱,۱۴۲ نفر
AmRo
(۵ امتیاز از ۱ رای)
Loading...

angular material 7 checkbox 6327 تصویر

کنترل 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 { }

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>

<h2 class = "tp-h2">Checkbox configuration</h2>

<mat-checkbox class = "tp-margin" [(ngModel)] = "checked">Checked</mat-checkbox>

<mat-checkbox class = "tp-margin" [(ngModel)] = "indeterminate">Indeterminate</mat-checkbox>

</section>

<mat-checkbox class = "tp-margin" [(ngModel)] = "disabled">Disabled</mat-checkbox>

</section>

<h2 class = "tp-h2">Result</h2>

<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;
}

.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;
}

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;

}

نتیجه

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

angular material 7 checkbox 6327 1 تصویر

جزئیات

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

انگولار متریال - Date Picker انگولار متریال - auto-complete