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

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

تصویر angular-material-7-checkbox_6327 کنترل CheckBox در انگولار متریال 7 - آموزش انگولار متریال

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

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

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

در ادامه برنامه ای که در بخش ایجاد پروژه در انگولار 7 ایجاد کرده بودیم را برای استفاده از کنترل 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 کنترل CheckBox در انگولار متریال 7 - آموزش انگولار متریال

جزئیات

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

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