Angular 2 Slide Up and Down Animation

Question

I recently built the following Angular 2 Read More component. What this component does is collapse and expand long blocks of text with \"Read more\" and \"Read Less\" links.

Answer 1

This is what I use in Angular 8.1.2. The beauty of the code is that it supports unlimited height of the div that needs to be shown/collapsed and also makes smooth transitions.

TS FILE:

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

@Component({
    selector: 'app-all-data',
    templateUrl: './all-data.page.html',
    styleUrls: ['./all-data.page.scss'],
    animations: [
        trigger('openClose', [
            state('open', style({
                height: '*',
                opacity: 1,
            })),
            state('closed', style({
                height: '0',
                opacity: 0
            })),
            transition('open => closed', [
                animate('0.35s')
            ]),
            transition('closed => open', [
                animate('0.35s')
            ]),
        ]),
    ]
})
export class AllDataPage implements OnInit {

    showCardBody = false;

    constructor() {
    }

    ngOnInit() {
    }

    /**
     * Toggle details on click
     */
    showDetails() {
        this.showCardBody = !this.showCardBody;
    }

}

HTML FILE:

       Toggle Details



       
This is some content
       
This is some content
       
This is some content
       
       
This is some content
       
This is some content