Open ng2bootstrap modal on page load in Angular 2 typescript

Question

Basically I want to open a bootstrap modal using Angular 2 typescript as soon as the page is done loading.

As of now, modal get's opened on click of the button. I tried with this.smModal.show() which you'll find below, but it given an error as follows -

EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'backdrop' of undefined

home.component.ts file is

import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import {CORE_DIRECTIVES} from '@angular/common';
import { Router } from '@angular/router';
import {MODAL_DIRECTIVES, BS_VIEW_PROVIDERS} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'my-home'
  templateUrl: 'app/home.component.html',
  directives: [MODAL_DIRECTIVES, CORE_DIRECTIVES],
  viewProviders:[BS_VIEW_PROVIDERS],
  styleUrls: ['app/home.component.css']
})
export class HomeComponent implements OnInit {

  @ViewChild('smModal') public smModal: ModalDirective;

  constructor(private router: Router) { }

  ngOnInit(){
    console.log("Open Modal on init itself.")
    this.smModal.show()
  }

  redirectToOtp(){
    this.router.navigate(['./otp']);
  }

}

Html is as follows

<button type="button" class="btn btn-primary" (click)="smModal.show()">Sign Docs</button>

<div bsModal #smModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <!-- <button type="button" class="close" aria-label="Close" (click)="smModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button> -->
      </div>
      <div class="modal-body">
        <div style="font-size:12px; text-align:center;border-bottom:1px solid #e5e5e5;">
          <div style="color:#696969;">
            <span>Gmail account? Proceed with</span>
          </div>
          <div style="padding-top:10px;">
            <button type="button" class="btn btn-danger" style="background-color:#dd4b39;border-radius:0px;" (click)="redirectToOtp()" (click)="smModal.hide()">Google</button>
          </div>
          <div style="color:#696969;padding-top:10px;padding-bottom:10px;">
            <span>TIP:</span><span style="color:#939393;font-size:10px;">If using multiple Gmail accounts, select the account shown above</span>
          </div>
        </div>
        <div style="padding-top:10px;" class="hidden-xs">
          <div style="text-align:center;">
          </div>

          <div style="color:#939393;font-size:10px; padding-left:45px;padding-right:45px">
          </div>

        </div>
        <div class="" style="padding-top:10px;text-align:center;">
          <button type="button" class="btn btn-primary" style="border-radius:0px;" (click)="redirectToOtp()" (click)="smModal.hide()">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

尝试将onInit代码移动到ngAfterViewChecked

Answer 2

onInit lifecycle hook checks if the current component has been initialized, not the children. What you need here is ngAfterContentInit , which will wait for the children to be initialized.