कोणीय सामग्री 7 - विस्तार पैनल

<mat-expansion-panel>, एक कोणीय निर्देश, एक विस्तार योग्य विस्तार v / s सारांश दृश्य बनाने के लिए उपयोग किया जाता है।

• <mat-expansion-panel-header>- शीर्ष लेख अनुभाग का प्रतिनिधित्व करता है। पैनल का सारांश समाहित करता है और पैनल के विस्तार या पतन के लिए नियंत्रण के रूप में कार्य करता है।

• <mat-panel-title> - पैनल शीर्षक का प्रतिनिधित्व करता है।

• <mat-panel-description> - पैनल सारांश का प्रतिनिधित्व करता है।

• <mat-action-row> - तल पर कार्रवाई पैनल का प्रतिनिधित्व करता है।

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

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

हम कोणीय 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 {MatExpansionModule, MatInputModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatExpansionModule, MatInputModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

निम्नलिखित संशोधित HTML होस्ट फ़ाइल की सामग्री है app.component.html।

<mat-expansion-panel>
   <mat-expansion-panel-header>
      <mat-panel-title>
         Personal data
      </mat-panel-title>
      <mat-panel-description>
         Type name and age
      </mat-panel-description>
   </mat-expansion-panel-header>
   <mat-form-field>
      <input matInput placeholder="Name">
   </mat-form-field>
   <mat-form-field>
      <input matInput placeholder="Age">
   </mat-form-field>
</mat-expansion-panel>

परिणाम

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

विवरण

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