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

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

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

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

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

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

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

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

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

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

BrowserAnimationsModule,

MatListModule,

FormsModule,

ReactiveFormsModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

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

<mat-list role = "list">
   <mat-list-item role = "listitem">One</mat-list-item>
   <mat-list-item role = "listitem">Two</mat-list-item>
   <mat-list-item role = "listitem">Three</mat-list-item>
</mat-list>

<mat-list role = "list">

<mat-list-item role = "listitem">One</mat-list-item>

<mat-list-item role = "listitem">Two</mat-list-item>

<mat-list-item role = "listitem">Three</mat-list-item>

</mat-list>

نتیجه

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

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

جزئیات

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

انگولار متریال - Stepper انگولار متریال - Grid List