CODEWITHSUNDEEP
angular
Patricio Vargas
Patricio Vargas

Reputation: 5522

load MDBootstrap modal on page load

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 ngOnInit() so when the pages loads https://mdbootstrap.com/angular/advanced/modals/#liveDemo

HTML

<button type="button" class="btn btn-primary waves-light" (click)="form.show()" mdbWavesEffect>Login with avatar form</button>
<!--Modal: Login with Avatar Form-->
<div mdbModal #form="mdb-modal" class="modal fade" id="modalLoginAvatar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog cascading-modal modal-avatar modal-sm" role="document">
        <!--Content-->
        <div class="modal-content">

            <!--Header-->
            <div class="modal-header">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%281%29.jpg" class="rounded-circle img-responsive">
            </div>
            <!--Body-->
            <div class="modal-body text-center mb-1">

                <h5 class="mt-1 mb-2">Room name</h5>

                <div class="md-form ml-0 mr-0">
                    <input mdbInputDirective type="password" type="text" id="form29" class="form-control ml-0">
                    <label for="form29" class="ml-0">Enter password</label>
                </div>

                <div class="text-center">
                    <button class="btn btn-cyan mt-1 waves-light" mdbWavesEffect>Login <i class="fa fa-sign-in ml-1"></i></button>
                </div>
            </div>

        </div>
        <!--/.Content-->
    </div>
</div>

TS the .show() says on VSCODE: Property 'show' does not exist on type 'ElementRef<any>'.

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();
  }

}

Upvotes: 0

Views: 1836

Answers (1)

Patricio Vargas
Patricio Vargas

Reputation: 5522

The only way I was able to get my code working was doing a little hack, I did the following:

TS

import { Component, OnInit, ViewChild, ElementRef  } from '@angular/core';
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: any;

  constructor(private modal : ModalModule) { }

  ngOnInit() {}

  ngAfterViewInit() {
    this.formModal.show();
  }
}

By me spacing the viewChild as "any" allows me to compile the code with any errors, and by me calling the this.formModal.show(); in the ngAfterViewInit() allows me to have all the components from the page loaded so I can call their specific methods in this case the .show()

Upvotes: 4

Related Questions