Simple Create Angular Accordion

 I have create a simple accordion in angular  step -2 .

1-> create a angular project for command ng new project name .

2=> import some package look like

:Add in angular  App.models 

import { AccordionComponent } from './components/accordion.component';

import { AccordionItemComponent } from './components/accordion-item.component';                            

@NgModule({

 

  declarations: [ AccordionComponent, AccordionItemComponent ],

 

})

3->next step goto create a component and add this code 

accordion.component.ts

import { Component, Input } from '@angular/core';

import { AccordionService } from '../services/accordion.service';

@Component({

  selector: 'app-accordion',

  template: `

    <dl class="accordion">

      <app-accordion-item *ngFor="let item of entries" 

      [entry]="item"></app-accordion-item>      

    </dl>

  `,  

  styleUrls: [ './accordion.component.scss' ]

})

export class AccordionComponent  {

  entries: any[];  

  constructor(private service: AccordionService ) { }

  ngOnInit() {

    this.entries = this.service.entries;

  }

  onBtnClick() {

    this.service.collapseAllEntries();

  }

}

Add in html look like this code an

<app-accordion></app-accordion>

create a AccordionItemComponent  

import { Component, Input } from '@angular/core';

import { AccordionService } from '../services/accordion.service';

@Component({

  selector: 'app-accordion-item',

  template: `

    <dt (click)="onBtnClick()">{{entry.title}}</dt>

    <dd class="{{uncollapsed ? 

      'uncollapsed' : 

      'uncollapsed collapsed'}}">{{entry.description}}</dd>

  `,  

  styleUrls: [ './accordion-item.component.scss' ]

})

export class AccordionItemComponent  {

  @Input() entry: any;

  uncollapsed = false;

  constructor(private service: AccordionService ) { }

  ngOnInit() {

    this.service.onEntryClick.subscribe(() => {

      this.uncollapsed = false;

    });

  }

  onBtnClick() {

    this.service.collapseAllEntries();

    this.uncollapsed = true;

  }

add css

:host{

  display:flex;

  flex-direction: column;

  &:not(:first-of-type) {

  border-top:1px solid #ddd;

}

}

dt{

  padding:5px;

  cursor:pointer;

  overflow:hidden;

  &:hover{

    background-color:#efefef;

  }

}

dd{

  padding-top:0;

  padding-bottom:0;

}

.uncollapsed {

  animation: slide-down 1s ease forwards;

  opacity:1;

}

.collapsed {

  animation: slide-up 1s ease forwards;

  opacity:0;

}

@keyframes slide-down {

  0% {

    height: 0;

    opacity:0;

  }

  100% {

    height: 50px;

    opacity:1;

  }

}

@keyframes slide-up {

  0% {

    height: 50px;

    opacity:1;

  }

  100% {

    height: 0;

    opacity:0;

  }

}

you want differnet type of accrodion use in your