Angular2 анимация внутри OnInit не работает

Question

В Angular2 приложения, я пытаюсь сделать анимацию

Вот HTML компонента:

<div [@playBox]="state" id="toPlay" class="playBox rounded-box"> 

    </div> 

Вот анимация:

animations:[ 
    trigger('playBox',[ 
      state('closed',style({ 
      width: '5%', 
      backgroundColor:'red', 
      transform:'translateX(0)' 
      })), 
      state('wided',style({ 
       width: '100%', 
       border: '3px solid red', 
       backgroundColor:'transparent' 
      })),transition('closed => wided',animate(4000))]) 
    ] 

I я собираюсь запустить эту анимацию при загрузке страницы:

export class AppComponent implements OnInit{ 
    state="closed"; 
public ngOnInit(): any 
{ 

     if(this.state=="closed"){ 

      this.state="wided"; 
     } 
} 

Answer 1

Не уверен, что это самое правильное и элегантное решение, но изменения state в следующем такте будет инициировать анимацию, как и ожидалось:

public ngOnInit(): any { 
    if (this.state == "closed") { 
    setTimeout(() => this.state = "wided") 
    } 
} 

В противном случае, this.state = "wided" вид переопределяет начальное closed состояние и компонент инициализируется с wided как начальное без анимация.