Angular_animations.md

Angular animations

The repsitory link: https://github.com/belachkar/ng-confusion.git

Example of animations implemantation within 3 files:

• app.animation.ts
• menu.component.ts
• menu.component.html

app.animation.ts

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

const visibility = trigger('visibility', [
  state('shown', style({
    transform: 'scale(1.0)',
    opacity: 1
  })),
  state('hidden', style({
    transform: 'scale(0.5)',
    opacity: 0
  })),
  transition('* => *', animate('0.5s ease-in-out'))
]);

const flyInOut = trigger('flyInOut', [
  state('*', style({
    opacity: 1,
    transform: 'translateX(0)'
  })),
  transition(':enter', [
    style({
      transform: 'translateX(-100%)',
      opacity: 0
    }),
    animate('500ms 300ms ease-in')
  ]),
  transition(':leave', [
    animate('300ms ease-out',
      style({
        transform: 'translateX(100%)',
        opacity: 0
      }))
  ])
]);

const expand = trigger('expand', [
  state('*', style({
    opacity: 1,
    transform: 'translateX(0)'
  })),
  transition(':enter', [
    style({
      transform: 'translateY(-20%)',
      opacity: 0
    }),
    animate('200ms ease-in')
  ])
]);

export { visibility, flyInOut, expand };

menu.component.ts

import { Component, OnInit, Inject } from '@angular/core';
import { Dish } from '../shared/dish';
import { DishService } from '../services/dish.service';
import { flyInOut, expand } from '../animations/app.animation';


@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.scss'],
  // tslint:disable-next-line: no-host-metadata-property
  host: {
    '[@flyInOut]': 'true',
    style: 'display: block'
  },
  animations: [flyInOut, expand]
})
export class MenuComponent implements OnInit {
  dishes: Dish[];
  errMsg: string;

  constructor(
    private dishService: DishService,
    @Inject('BaseURL') public BaseURL) { }

  ngOnInit(): void {
    this.dishService.getDishes().subscribe(
      dishes => this.dishes = dishes,
      errMsg => this.errMsg = errMsg
    );
  }
}

menu.component.html

<div class="container" fxLayout="column" fxLayoutGap="10px">

  <div fxFlex>
    <div>
      <h3>Menu</h3>
      <hr>
    </div>
  </div>

  <div fxFlex *ngIf="dishes" [@expand]>
    <mat-grid-list cols="2" rowHeight="200px">
      <mat-grid-tile appHighlight
        *ngFor="let dish of dishes"
        [routerLink]="['/dishdetail', dish.id] ">
        <img matListAvatar height="200px" src="{{BaseURL + dish.image}}" alt="{{dish.name}}">
        <mat-grid-tile-footer>
          <h1 matLine>{{dish.name | uppercase}}</h1>
        </mat-grid-tile-footer>
      </mat-grid-tile>
    </mat-grid-list>
  </div>

  <!-- Spinner -->
  <div fxFlex [hidden]="dishes || errMsg">
    <mat-spinner></mat-spinner>
    <h4>Loading... Please wait!</h4>
  </div>

  <!-- Display error messages -->
  <div fxFlex *ngIf="errMsg">
    <h2>Errors</h2>
    <h4>{{errMsg}}</h4>
  </div>

</div>