Ngx-bootstrap: Auto open modal from components

Created on 3 Aug 2016 · 12Comments · Source: valor-software/ngx-bootstrap

We want to open modal on page load/autoshow, I'm calling show modal function in ngOnInit function.code of same is as follows

componet.ts file

import { Component, OnInit, ViewChild } from '@angular/core';

import { MODAL_DIRECTIVES, BS_VIEW_PROVIDERS } from 'ng2-bootstrap/ng2-bootstrap';
import { ModalDirective } from 'ng2-bootstrap/components/modal/modal.component';
import { Router } from '@angular/router';

import { UserService } from '../user.service';
import { UserFBService } from '../user-facebook.service';
import { UserModel } from '../user.model';

@Component({
moduleId: module.id,
selector: 'app-user-type',
templateUrl: 'usertype.component.html',
directives: [MODAL_DIRECTIVES],
viewProviders: [BS_VIEW_PROVIDERS],
exportAs: 'usertype'
})
export class UsertypeComponent implements OnInit {
@ViewChild('UsertypeModal') UsertypeModal: ModalDirective;
constructor(private userService: UserService, private router: Router,
private userModel: UserModel) {
console.log('In UsertypeComponent');

}
ngOnInit() {
this.showModal();
}
showModal() {
console.log('Clicked on showModal');
this.UsertypeModal.show();
}

hideModal() {
console.log('Clicked on hideModal');
this.UsertypeModal.hide();
}
}

componet.html file

            <div class="modal-body custom-pop-modal">
                <h2>Tell Us About Yourself</h2>
                <p class="text-center">Help us get to know you better</p>
                <ul class="signup-user">
                    <li class="col-sm-4 col-xs-6">
                        <a href="javascript:void(0);">
                            <div class="signup-box">
                                <i class="icon-renter"></i>
                            </div>
                            <h4>I am a Renter</h4></a>
                    </li>
                    <li class="col-sm-4 col-xs-6">
                        <a href="javascript:void(0);" data-toggle="modal" data-target="#signUp" data-dismiss="modal">
                            <div class="signup-box">
                                <i class="icon-owner"></i>
                            </div>
                            <h4>I am an Owner</h4></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

It's not working getting following error .
browser_adapter.ts:74 EXCEPTION: TypeError: Cannot read property 'backdrop' of undefined

Source

kharatps02

👍4

Most helpful comment

Use ngAfterViewInit instead of ngOnInit. The ViewChildis still undefined when the component is initialized and the showModal() function is run.

djsiroky on 9 Aug 2016

👍44 ❤4 😄3

All 12 comments

I'm getting this same error.

sdornan on 3 Aug 2016

@kharatps02
I believe, since you are accessing the ViewChild with UsertypeModal, you need to define a local template variable with that name. On your div.modal-body.custom-pop-modal element, you need to add #UsertypeModal="bs-modal", like so:
<div #UsertypeModal="bs-modal" class="modal-body custom-pop-modal">

kirjai on 8 Aug 2016

👍3

Use ngAfterViewInit instead of ngOnInit. The ViewChildis still undefined when the component is initialized and the showModal() function is run.

djsiroky on 9 Aug 2016

👍44 ❤4 😄3

Got same error too sometimes

Hongbo-Miao on 27 Aug 2016

@djsiroky thanks for help!

valorkin on 13 Oct 2016

@djsiroky Saved my day.

andershagebakken on 19 Oct 2016

👍1

I too stumbled upon this. Thinking about it, then it makes sense however put it in a ngOnInit out of habit.
Cheers!

Dashue on 17 Nov 2016

👍1

@djsiroky Thank you so much for your help. I had been trying to solve the bug the whole working day.

ht89 on 9 Mar 2017

👍2

Big thanks to @djsiroky

dwasyluk on 10 Jun 2017

Thanks @djsiroky!
For those that had my problem:
If you are getting this during a test for example in jasmine. Make sure you do

fixture.detectChanges();
BEFORE:
ModalDirective.show() is called.

Regards!

josead on 15 May 2018

👍3 🎉2

Thanks @josead, that's been the exact reason of my problem during jasmine tests.

aleor on 17 May 2018

If you want to show modal on load of component, you can use 'show' attribute of config applied to modal.
ex. [config]='{show: true, ....}'
Reference:
https://valor-software.com/ngx-bootstrap/#/modals#directive-auto-shown