कोणीय सामग्री 7 - सूची

<mat-list>एक कोणीय निर्देश, वस्तुओं की एक श्रृंखला को ले जाने और प्रारूपित करने के लिए एक कंटेनर बनाने के लिए उपयोग किया जाता है।

इस अध्याय में, हम कोणीय सामग्री का उपयोग करके एक सूची नियंत्रण आकर्षित करने के लिए आवश्यक कॉन्फ़िगरेशन का प्रदर्शन करेंगे।

कोणीय अनुप्रयोग बनाएँ

हम कोणीय 6 में बनाए गए कोणीय अनुप्रयोग को अद्यतन करने के लिए निम्नलिखित चरणों का पालन करें - प्रोजेक्ट सेटअप अध्याय -

कदम	विवरण
1	एक सामग्री नाम के साथ एक परियोजना बनाएँ। जैसा कि कोणीय 6 में समझाया गया है - प्रोजेक्ट सेटअप अध्याय।
2	संशोधित app.module.ts , app.component.ts , app.component.css और app.component.html नीचे बताये गए। बाकी फाइलें अपरिवर्तित रखें।
3	लागू तर्क के परिणाम को सत्यापित करने के लिए एप्लिकेशन को संकलित करें और चलाएं।

निम्नलिखित संशोधित मॉड्यूल विवरणक की सामग्री है 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 { }

निम्नलिखित संशोधित HTML होस्ट फ़ाइल की सामग्री है 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>

परिणाम

परिणाम सत्यापित करें।

विवरण

• पहले, हमने चटाई-सूची का उपयोग करके सूची बनाई है।
• फिर, हमने मैट-लिस्ट-आइटम का उपयोग करके सामग्री जोड़ दी है।