title: load MDBootstrap modal on page load
body: <p>I'm using MDB component library on my app (This is the first time I'm using this library) While using the modal for this library, the example they have is by you clicking on a button and the modal will show. I want to be able to show the modal in <code>ngOnInit()</code> so when the pages loads
  <a href="https://mdbootstrap.com/angular/advanced/modals/#liveDemo" rel="nofollow noreferrer">https://mdbootstrap.com/angular/advanced/modals/#liveDemo</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;button type="button" class="btn btn-primary waves-light" (click)="form.show()" mdbWavesEffect&gt;Login with avatar form&lt;/button&gt;
  &lt;!--Modal: Login with Avatar Form--&gt;
  &lt;div mdbModal #form="mdb-modal" class="modal fade" id="modalLoginAvatar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-dialog cascading-modal modal-avatar modal-sm" role="document"&gt;
          &lt;!--Content--&gt;
          &lt;div class="modal-content"&gt;
  
              &lt;!--Header--&gt;
              &lt;div class="modal-header"&gt;
                  &lt;img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%281%29.jpg" class="rounded-circle img-responsive"&gt;
              &lt;/div&gt;
              &lt;!--Body--&gt;
              &lt;div class="modal-body text-center mb-1"&gt;
  
                  &lt;h5 class="mt-1 mb-2"&gt;Room name&lt;/h5&gt;
  
                  &lt;div class="md-form ml-0 mr-0"&gt;
                      &lt;input mdbInputDirective type="password" type="text" id="form29" class="form-control ml-0"&gt;
                      &lt;label for="form29" class="ml-0"&gt;Enter password&lt;/label&gt;
                  &lt;/div&gt;
  
                  &lt;div class="text-center"&gt;
                      &lt;button class="btn btn-cyan mt-1 waves-light" mdbWavesEffect&gt;Login &lt;i class="fa fa-sign-in ml-1"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;!--/.Content--&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>TS</strong> the .show() says on VSCODE: <code>Property 'show' does not exist on type 'ElementRef&lt;any&gt;'.</code></p>
  
  <pre><code>import { Component, OnInit, ViewChild, ElementRef  } from '@angular/core';
  // For MDB Angular Free
  import { ModalModule, WavesModule, InputsModule } from 'angular-bootstrap-md'
  
  @Component({
    selector: 'app-roommain',
    templateUrl: './roommain.component.html',
    styleUrls: ['./roommain.component.scss']
  })
  export class RoommainComponent implements OnInit {
    @ViewChild ('form') public formModal: ElementRef;
  
    constructor(private modal : ModalModule) { }
  
    ngOnInit() {
      this.formModal.show();
    }
  
  }
  </code></pre>