own Expansion Panel using Angular animation

#angular #animation #expansionpanel #expand

So this is a time to depth more into Angular animation, lets see that we need see some text, but on click on panel, we shuld see more infomation, of coruse with animation.

lets create TextExpandComponent

ng g c text-expand

my text-expand.component.html should be look that:

<div class="panel-header" (click)="onSwitch()">
  <img [@animationRotate]="sStatus" src="../assets/arrow.svg" alt="arrow" /> click me to show more
</div>

<div class="panel-text" [@animationShowHide]="sStatus">
  This is a secrect text show only when user click
 </div>

and my text-expand.component.ts shoudl be look that:

import { Component } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';

@Component({
  selector: 'app-text-expand',
  templateUrl: './text-expand.component.html',
  styleUrls: ['./text-expand.component.scss'],
  animations : [
    trigger('animationShowHide', [
      state('close', style({ height: '0px', overflow: 'hidden' })),
      state('open', style({ height: '*',overflow: 'hidden'})),
      transition('open <=> close', animate('900ms ease-in-out')),
    ]),
    trigger('animationRotate', [
      state('close', style({ transform: 'rotate(0)' })),
      state('open', style({ transform: 'rotate(-180deg)' })),
      transition('open <=> close', animate('900ms ease-in-out')),
    ]),
  ],
})
export class PartialTextExpandComponent {

  sStatus = 'close';

  onSwitch(){
    this.sStatus = this.sStatus === 'close' ? 'open' : 'close';
  }

}

Summary we create two animation
first animationRotate witch will be rotate arrow svg
and second animationShowHide witch will be rescale text size to orginal

each animation respect sStatus variable where close and open status we decarate in animation state, switch between two state is declare in open <=> close and has 900ms duration

so nice fun with change each parameter, this is a good way to lern.

Good luck!

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

🐯 🚀 Timescale is now TigerData: Building the Modern PostgreSQL for the Analytical and Agentic Era

We’ve quietly evolved from a time-series database into the modern PostgreSQL for today’s and tomorrow’s computing, built for performance, scale, and the agentic future.

So we’re changing our name: from Timescale to TigerData. Not to change who we are, but to reflect who we’ve become. TigerData is bold, fast, and built to power the next era of software.