angular - the animation effect fails when loading the component

Question

I want to make a opacity effect when the page-component is loaded, but I found that it must be set a setTimeout() in order to operate successfully. Is there a better way?

For example:

component:

@Component({
  selector : 'my-app',
  template: `
  <div id="component" [ngClass]="{show: block}">
    content
  </div>
  `
})
export class FaderComponent implements OnInit {
  block: boolean = false
  constructor(){}
  ngOnInit() {

    setTimeout(()=>{
      this.block = true;
    },100)

  }
}

scss:

#component {
  opacity: 0;
  transition: 0.4s;
  &.show{
    opacity: 1;
  }
}

Answer 1

You can use example for reference to add animation on component load.