How to Add Animations to a Component in Angular where the template is based on ngTemplate

Question

The template for this component is like this

<ng-template #primary @fading><ng-content select="[primary]"></ng-content></ng-template> // gives error
<ng-template #secondary> <ng-content select="[secondary]"></ng-content></ng-template>


<ng-container *ngIf="(mode | async)=== mode_layout_100_0">
  <div class="h-100">
    <ng-container *ngTemplateOutlet="primary"></ng-container>
  </div>
</ng-container>
<ng-container *ngIf="(mode | async)=== mode_layout_0_100">
  <div class="h-100">
    <ng-container *ngTemplateOutlet="secondary"></ng-container>
  </div>
</ng-container>
<ng-container *ngIf="(mode | async)=== mode_layout_33_66">
  <div class="d-flex flex-row h-100 split-view" @fading> // dosent work 
    <div class="d-none d-sm-none d-md-none d-lg-block col-lg-4 p-0">
      <ng-container *ngTemplateOutlet="primary"></ng-container>
    </div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-8 p-0 view-seperator">
      <ng-container *ngTemplateOutlet="secondary"></ng-container>
    </div>
  </div>
</ng-container>
<ng-container *ngIf="(mode | async)=== mode_layout_66_33">
  <div class="d-flex flex-row h-100 split-view">
    <div class="col-sm-8 p-0">
      <ng-container *ngTemplateOutlet="primary"></ng-container>
    </div>
    <div class="col-sm-4 p-0 view-seperator">
      <ng-container *ngTemplateOutlet="secondary"></ng-container>
    </div>
  </div>
</ng-container>

It acts as Manager which splits the view depending upon what we want primary or secondary or a mix of both and the layout of 33 % to 66 %.

I have added the following metadata to the decorator

animations: [
    trigger('fading', [
      transition(':enter', animate('800ms ease-out')),
      transition(':leave', animate('800ms ease-in')),
    ])
  ]

What i am trying to achieve is when ever the view changes from mode from Primary to secondary incase of nested use of this component . There whould be a smooth animation of ease in and out .

How do i add the animate tag I tried adding to the ng-template it gives an error and if i add to each div it dosent work .

Answer 1

As far as I know this is not possible using ng-template at least for Angular 6 (and 7). This Angular directive is managed internally by it, so I haven't found anything by a thorough search.

What I've used to overcome this situation is adding a variable inside the component code and use in the component HTML markup with a conditional *ngIf directive evaluating this. For cases of using rxjs Observable, subscribe to it and then change the loading value to true. Just don't forget to add your animation properly to the HTML divs you want to animate.

my.component.html

<div *ngIf="loading" @animation>
...
</div>
<div *ngIf="!loading" @animation>
...
</div>

my.component.ts

@Component({
  selector: 'app-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css'],
  animations: [
    ...
  ]
})
export class MyComponent implements OnInit {
  loading: boolean = true;
  ...

  ngOnInit() {
    this.config$.subscribe(() => {
      this.loading = false;
    })
  }
}