title: How to dynamic update angular animation ? (angualr 8)
body: <p>I'm using the angular animation like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>@Component({
    selector: 'app-navbar',
    animations: [
      trigger('openClose', [
        // ...
        state(
          'open',
          style({
            height: this.navBarHeight ? this.navBarHeight.toString() + 'px' : '0px',
            opacity: 1,
            backgroundColor: 'yellow',
          }),
        ),
        state(
          'closed',
          style({
            height: '0px',
            opacity: 1,
            backgroundColor: 'green',
          }),
        ),
        transition('open =&gt; closed', [animate('0.3s')]),
        transition('closed =&gt; open', [animate('0.3s')]),
      ]),
    ],
    templateUrl: './navbar.component.html',
    styleUrls: ['./navbar.component.scss'],
  })
  
  export class NavbarComponent implements OnInit {
  
    public navBarHeight = 0;
  
   public ngOnInit() {
      this.navBarHeight = this.navBarContainer.nativeElement.offsetHeight;
    }
  
  }
  
  </code></pre>
  
  <p>so the element that I want animated has a dynamic height based on the server, so I need to save the origin height when the page is fully loaded. </p>
  
  <p>in ngOnInit I can got the height of the element , but the problem is I got an <code>Cannot read property 'navBarHeight' of undefined</code> when I try to define the animation before I got the height that I wanted.</p>
  
  <p>is there a way to dynamic set the animation settings?</p>