I have to made an accordion-, respectively "zippy"-component using Angular 7.

I'm new to Angular. Just started with it a few weeks ago. But with some Google-usage I was able to implement the required feature.

Here's the way it looks.

In collapsed state:

Closed accordion

In expanded state:

Opened accordion

Here's the code which I wrote for the accordion-component:

import {
} from '@angular/core';
import {
} from '@angular/platform-browser';

  selector: 'zippy',
  templateUrl: './zippy.component.html',
  styleUrls: ['./zippy.component.css']
export class ZippyComponent implements OnInit {
  @Input() title;
  isExpanded = false;
  buttonCaption = "Expand";

  constructor() {}

  ngOnInit() {}

  onClickButton() {
    this.isExpanded = !this.isExpanded;
    this.buttonCaption = this.isExpanded ? "Collapse" : "Expand";
.container {
  font-family: Arial, Helvetica, sans-serif;
  max-width: 800px;
  width: 100%;
  margin: auto 2rem;
  padding: 3rem 2rem;
  border: 1px solid #555;
  border-radius: 6px;
  text-align: left;
  font-size: 2rem;
  margin-bottom: 1rem;

nav {
  display: flex;
  justify-content: space-between;

.container a {
  text-decoration: none;
  padding: 0.4rem 0.6rem;
  font-size: 2rem;
  color: #555;

.container a:hover {
  cursor: pointer;

main {
  padding: 0.25rem 1rem;
  margin-top: 3rem;
  background-color: #eee;
  border-radius: 6px;
  font-size: 1.4rem;
<div class="container">
    <div>{{ title }}</div>
      <a href="#" (click)="onClickButton()">
        <i class="fas" [ngClass]="(isExpanded) ? 'fa-angle-up' : 'fa-angle-down'"></i>
  <main *ngIf="isExpanded">
    <div class="content">

The code of 'app.component.html':

<div style="text-align:center" class="wrap">
  <zippy title="Shipping Details">
    <p>Duo dolore sit et clita amet, aliquyam clita sed duo nonumy amet et et et. Rebum amet lorem stet est.</p>
    <p>Prose and thy of have days heavenly. Parasites the not unto in so. Delphis yet friend drop cell caught mote, companie a gild favour and.</p>
    <p>De quille inouies pieds blonds béni crépuscule les ravie fermentent, béhémots rutilements mer couleurs des de maries pénétra fortes folle. Je de dévorés suivi de. Impassibles liens a a papillon..</p>

  <zippy title="Billing Details">
    <p>Großer teuren gar im wie freunde du sanft wo, in du wo gar denkst weh liebe so ich dir. Kleinem zu spät du dann ort ort. Nun der denkst gesellschaft.</p>

The functionality works but currently it just changes from collapsed to expanded state at once. It would be cool to have some animation or something similar when it changes. So that one has a "soft" transition.

If someone knows how to transition that I would love to read his / her answer.

All other hints, recommendations and critiques concerning my implementation welcomed as well.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.