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

جمعه ۱۲ شهریور ۱۴۰۰
بازدید ۵۹۹ نفر
سعید سیفی زاده
(5 امتیاز از 1 رای)
Loading...

تصویر angular-material-7-chips_6407 کنترل Chip در انگولار متریال 7 – آموزش انگولار متریال

کنترل Chip در انگولار متریال

یک دستورالعمل انگولار است که به منظور نمایش مقادیر به صورت یک Chip مورد استفاده قرار می گیرد. در این بخش چگونگی استفاده از این دستورالعمل را با یک مثال ساده بررسی خواهیم کرد.

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

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

محتوای فایل 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 {MatChipsModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatChipsModule,
      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 {MatChipsModule} from '@angular/material'

import {FormsModule, ReactiveFormsModule} from '@angular/forms';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

BrowserAnimationsModule,

MatChipsModule,

FormsModule,

ReactiveFormsModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

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

<mat-chip-list>
   <mat-chip>One</mat-chip>
   <mat-chip>Two</mat-chip>
   <mat-chip color = "primary" selected>Tree</mat-chip>
   <mat-chip color = "accent" selected>Four</mat-chip>
</mat-chip-list>

<mat-chip-list>

<mat-chip>One</mat-chip>

<mat-chip>Two</mat-chip>

<mat-chip color = "primary" selected>Tree</mat-chip>

<mat-chip color = "accent" selected>Four</mat-chip>

</mat-chip-list>

نتیجه

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

تصویر angular-material-7-chips_6407_1 کنترل Chip در انگولار متریال 7 – آموزش انگولار متریال

جزئیات

در ابتدا ما با استفاده از دستورالعمل mat-chip-list لیستی برای نگهداری Chip ها را ایجاد کرده ایم.
سپس با استفاده از دستورالعمل mat-chip آیتم های مورد نظر را به لیست اضافه نموده ایم.

انگولار متریال - Icons انگولار متریال - Badge