Is state change possible in animation triggers without any click event?

Question

my animation trigger has three states: Void, True and false.

I am using a subscription to check if there is a change in one of the variables. If there is a change, state changes to true and popup appears as per the following animation:

animations: [
        trigger('visibilityChanged', [
            state('void' , style({ opacity: 0})),
            state('true' , style({ opacity: 1})),
            state('false', style({ opacity: 0})),
            transition('* => *', animate('.5s'))
        ])
    ]

I want this popup to disappear after a short time (1s) without triggering any click event or change.

Answer 1

You could use a Subject for your subscription and then subscribe two times to it :

• one time for catching the change
• one time for a debounce time of 1000, for example, and then close your modal

This is an example :

import {Component, OnInit} from '@angular/core';
import {Subject} from 'rxjs/Subject';

@Component({
  selector: 'selfclosing-popup',
  templateUrl: 'etc.'
  animations: [
    trigger('visibilityChanged', [
        state('void' , style({ opacity: 0})),
        state('true' , style({ opacity: 1})),
        state('false', style({ opacity: 0})),
        transition('* => *', animate('.5s'))
    ])
  ]
})
export class SelfclosingPopup implements OnInit {
  changeSubject = new Subject<boolean>();
  visibilityChanged: string;    

  ngOnInit(): void {    
    this.changeSubject.subscribe((change) => this.visibilityChanged = change);
    this.changeSubject.debounceTime(1000).subscribe(() => this.visibilityChanged = false);
  }

  public notifyChange() {
    this.changeSubject.next(true);
  }
}