Post
Ask Question

Dynamic Expansion Panel as a separate component.

Let's dive into the practical implementation behind creating a dynamic expansion panel component in Angular, specifically focusing on Angular components, Angular Material, and data binding. To create a dynamic expansion panel for User Personal Address and Correspondence Address as a separate component in Angular.

Theory and Concepts
 

1. Angular Components

Angular applications are made up of components, which are the fundamental building blocks of the UI. Each component consists of.

  • A TypeScript class that defines the component's behavior.
  • An HTML template that defines the component's view.
  • CSS styles that define the component's appearance.

Example Structure

  • Component Class (.ts): Contains the logic for the component.
  • Component Template (.html): Contains the HTML markup for the view.
  • Component Styles (.css): Contains the styles specific to the component.

2. Angular Material

Angular Material is a UI component library for Angular developers, based on Google's Material Design. It provides a range of reusable UI components, such as buttons, cards, and expansion panels, that follow Material Design principles.

Angular Material Expansion Panel: The Expansion Panel component is used to display information in a collapsible form. It can contain multiple panels that expand or collapse independently of each other.

3. Data Binding

Data binding in Angular synchronizes data between the model and the view. Angular uses the following types of data binding.

  • Interpolation ({{ }}): Used to bind component properties to the template.
  • Property Binding ([ ]): Used to bind attributes of HTML elements to component properties.
  • Event Binding (( )): Used to bind events (e.g., click, change) to component methods.
  • Two-Way Binding ([( )]): Combines property and event binding to synchronize data between the model and the view.

4. Input Decorator

The @Input() decorator in Angular is used to pass data from a parent component to a child component. This enables the child component to receive input data and dynamically update its content based on the input received.

Practical Implementation

Let's break down the practical steps to implement a dynamic expansion panel for User Personal Address and Correspondence Address.

  1. Create the Expansion Panel Component
    • Generate a new component for the expansion panel using Angular CLI.
    • Design the template to include Angular Material's Expansion Panel.
  2. Add the Expansion Panel to Your Main Component: Pass the address data to the expansion panel component.

Here's a detailed implementation.

Step 1. Generate the Expansion panel component

Generate a new component using Angular CLI, and run the following command in your terminal.

ng generate component address-expansion-panel

Step 2. Install Angular Material

Install Angular Material and include the necessary modules, if Angular Material is not already installed, install it using the following command.

ng add @angular/material

Step 3. Update app.module.ts

Import the MatExpansionModule in your app.module.ts or Import the necessary Angular Material modules in your app.module.ts.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatExpansionModule } from '@angular/material/expansion';
import { AppComponent } from './app.component';
import { AddressExpansionPanelComponent } from './address-expansion-panel/address-expansion-panel.component';
@NgModule({
  declarations: [
    AppComponent,
    AddressExpansionPanelComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatExpansionModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4. Define the Expansion panel component

Create the component class and template to handle the data and display the expansion panels.

Component Class

The class will have @Input() properties to receive the address data from the parent component.

Filename: address-expansion-panel.component.ts.

import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-address-expansion-panel',
  templateUrl: './address-expansion-panel.component.html',
  styleUrls: ['./address-expansion-panel.component.css']
})
export class AddressExpansionPanelComponent {
  @Input() personalAddress: any;
  @Input() correspondenceAddress: any;
}

Component Template

Use Angular Material's expansion panel component to create collapsible panels for displaying the address data.

Filename: address-expansion-panel.component.html.

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Personal Address
      </mat-panel-title>
    </mat-expansion-panel-header>
    <div *ngIf="personalAddress">
      <p>{{ personalAddress.street }}</p>
      <p>{{ personalAddress.city }}</p>
      <p>{{ personalAddress.state }}</p>
      <p>{{ personalAddress.zip }}</p>
    </div>
  </mat-expansion-panel>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Correspondence Address
      </mat-panel-title>
    </mat-expansion-panel-header>
    <div *ngIf="correspondenceAddress">
      <p>{{ correspondenceAddress.street }}</p>
      <p>{{ correspondenceAddress.city }}</p>
      <p>{{ correspondenceAddress.state }}</p>
      <p>{{ correspondenceAddress.zip }}</p>
    </div>
  </mat-expansion-panel>
</mat-accordion>

Step 5. Use the Expansion panel component in the Main component

Pass the address data from the parent component to the child component using property binding.

Parent Component Class

Filename: app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  personalAddress = {
    street: '123 Main St',
    city: 'Springfield',
    state: 'IL',
    zip: '62701'
  };
  correspondenceAddress = {
    street: '456 Elm St',
    city: 'Springfield',
    state: 'IL',
    zip: '62702'
  };
}

Parent Component Template

Filename: app.component.html

<app-address-expansion-panel 
  [personalAddress]="personalAddress" 
  [correspondenceAddress]="correspondenceAddress">
</app-address-expansion-panel>

Conclusion

  • Components: Define reusable blocks of UI with logic and presentation.
  • Angular Material: Provides pre-built UI components that follow Material Design.
  • Data Binding: Synchronizes data between the model and view.
  • Input Decorator: Allows passing data from parent to child components.

This approach ensures that the address data is encapsulated within a dedicated component, making the code more modular, reusable, and maintainable. This implementation creates a dynamic expansion panel component that can be reused to display personal and correspondence addresses. The addresses are passed to the component via Input properties, allowing for flexibility and reuse in different contexts.


Similar Articles