How do I give animation in Angular

Question

I am trying to create an application where I want to give Angular animation to a span. I took reference from this example StackBlitz Example I tried to create my own span after that. I have created a MyStackBlitz here to provide an example what I am doing.

As shown in example, I want to add collapse animation to that span.

I have tried doing that from the reference example I have provided, but I am stuck at a point where I dont know what I am doing wrong.

Answer 1

To get it closer to the example you are trying to copy you would need to do the following.

First you would need to import BrowserAnimationsModule to your module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Next you would need to move your [@collapse]="collapsed" to the div#detailsid as you are trying to animate that element, not span#user trigger/icon/button. Also remove [hidden]="isShow" as the visibility/height is handled by the animations applying height and visibility:

<div id="detailsid" [@collapse]="collapsed">
  <!-- your stuff -->
</div>

Finally you will need to update your CSS to have div#detailsid to have overflow: hidden;

#detailsid {
  overflow: hidden;
}

Here is an example mostly working.