How to Give Class Name to Animation State in Angular 2/4

Is it possible to add a CSS class on ':enter' or ':leave' events of a component/element like used with Animations in Angular 10?

Unfortunatly you cant add or remove classes with angulars animation API (see How to give class name to animation state in angular 2/4?).

Binding with e.g. [ngClass] will also not work in this scenario, because when the :enter animation triggers, the element is not in the actual DOM yet, so any applied css will have no impact. https://angular.io/guide/transition-and-triggers#enter-and-leave-aliases

Angular 2/4 animate one item inside an array instead of all items

With some external help and research I figured out the solution to my problem.

portfolio.component.ts

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

export class Job {
  id: number;
  title: string;
  state: string;
}   

@Component({
  selector: 'portfolio',
  templateUrl: './portfolio.component.html',
  styleUrls: ['./portfolio.component.css'],
  animations: [
    trigger('enlarge', [
        state('small', style({
            height: '100px',
            transform: 'translateY(0)',
        })),
        state('large', style({
            height: '200px',
            transform: 'translateY(-300px)',
            background: 'red'
        })),
    ]),

  ]
})

export class PortfolioComponent {
    title   = 'Portfolio';

    jobs = [
        { id: 11, title: 'Item 1', state: 'small' },
        { id: 12, title: 'Item 2', state: 'small' },
        { id: 13, title: 'Item 3', state: 'small' },
    ];

    enlarge(index) {
        index.state = (index.state === 'small' ? 'large' : 'small');

    }
}

portfolio.component.html

<div class="list" 
*ngFor='let job of jobs'
[@enlarge]='job.state'
(click)="enlarge(job)">
    <div for="#">{{job.id}} - {{job.title}}</div>
</div>

Angular 2/4 Animation on div height

You don't have any states defined in your trigger() function.

trigger creates a named animation trigger, containing a list of state() and transition() entries to be evaluated when the expression bound to the trigger changes (the expression being [@slideInOut]="helpMenu" in example below).

@Component({
  ...
  animations: [
    trigger('slideInOut', [
      state('in', style({
        overflow: 'hidden',
        height: '*',
        width: '300px'
      })),
      state('out', style({
        opacity: '0',
        overflow: 'hidden',
        height: '0px',
        width: '0px'
      })),
      transition('in => out', animate('400ms ease-in-out')),
      transition('out => in', animate('400ms ease-in-out'))
    ])
  ]
})
export class AComponent implements OnInit {

  helpMenu: string;

  constructor() { }

  ngOnInit() {
    this.helpMenu = 'out';
  }

  toggleHelpMenu(): void {
    this.helpMenu = this.helpMenu === 'out' ? 'in' : 'out';
  }

}

Then use it in your view like this:

<div [@slideInOut]="helpMenu">
   <h1>My Title</h1>
   <p>My paragraph</p>
</div>
<button (click)="toggleHelpMenu()">help</button>

Angular 2/4 Animating Host Component using Host Bindings, is it possible?

There's a couple of thing wrong with your plunker:

1. You have to import the BrowserAnimationsModule from @angular/platform-browser/animations in your AppModule.
2. You're missing the @ in the HostBinding decorator.
3. @HostBinding basically lets you bind some value (which could change in the lifecycle of your component) to the host element, and that is your component itself. So you have to bind to a class property rather than a method.

Here's a working version of your plunker

---

Related Topics