Custom Accordian in Angular

How to create reusable custom accordion in Angular
First create a folder name accordion with three files (accordian.component.ts, accordian.component.html and accordian.component.css) files code is given below. I am passing a data from app.component.ts to accordian.component.ts.I am passing data from parent to children using @input decorator and there is a loop and toggle function in accordion which show and hide the corresponding element we click and data i received from service file.You can also add static data in accordion if you see (app.component.ts) i have added static data in accordion array of objects.I am calling accordion component in app.component.html file and for service and data see servicedata.service.ts
Demo Link

accordian.component.ts
import { Component,Input } from '@angular/core';
@Component({
  selector: 'app-accordian',
  templateUrl: './accordian.component.html',
  styleUrls: ['./accordian.component.css']
})
export class AccordianComponent {
@Input() isOpen;
  constructor() { }
@Input() data;
 toggleAccordian():void{
 this.isOpen = !this.isOpen;
 console.log(this.isOpen)
}
}
accordian.component.html
<div class="card mb-2" >
  <div class="card-header" (click)="toggleAccordian()">
    {{data.title}}
  </div>
  <div class="card-body"  [class.d-none]="isOpen">
    <p class="card-text"> {{data.summary}}</p>
     </div>
</div>
accordian.component.css
.card-header{
    cursor: pointer;
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AccordianComponent } from './accordian/accordian.component';
import { Servicedata } from './servicedata.service';
@NgModule({
  declarations: [
    AppComponent,
    AccordianComponent
  ],
  imports: [
    BrowserModule
  ],
  providers:[Servicedata],
  bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component,OnInit,ContentChild } from '@angular/core';
import { Servicedata } from './servicedata.service';
import { AccordianComponent } from './accordian/accordian.component';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
 accord_Data:Object[];
  static_Data={
    title:'Static Header',
    summary:"Lorem Ipsum is simply dummy text of the printing and typesetting industry 1"
    };
 isOpen:boolean = true;
 constructor(private serviceData:Servicedata) { }
  ngOnInit(){
  this.accord_Data = this.serviceData.getData()
   this.accord_Data.unshift(this.static_Data)
}
}
app.component.html
<div class="container-fluid">
<app-accordian *ngFor="let data of accord_Data" [data]="data" [isOpen]="isOpen" ></app-accordian>
</div>
servicedata.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class Servicedata {
  constructor() { }
getData() {
  return  [
  {
    title:'Header 1',
    summary:"Lorem Ipsum is simply dummy text of the printing and typesetting industry 1"
    },
     {
    title:'Header 2',
    summary:"Lorem Ipsum is simply dummy text of the printing and typesetting industry 2"
    },
     {
   title:'Header 3',
    summary:"Lorem Ipsum is simply dummy text of the printing and typesetting industry 2"
    }
]
 }
}

Leave a Reply

Your email address will not be published. Required fields are marked *