Open bootstrap modal on page load angular 2

Question

I am working on an angular2 project and I have 2 components namely: home and first.

My home.component.html is as below :-

Answer 1

To make the modal display upon user first visiting the component:

Component's TS file:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit{
@ViewChild('openModal') openModal:ElementRef;

title = 'app works!';

ngOnInit(){
 this.openModal.nativeElement.click();
}

Component's HTML file:

This will open the modal upon the user first visiting the page. You'll have a ghost button that the user can not see, but will be activated by using this.openModal.nativeElement.click(). Lots of possiblities using this method to open the modal.

To open the same modal when the user clicks the login button:

HTML:

Login

TS:

myFunc(){
  this.openModal.nativeElement.click();
}

This may not be the most elegant solution, but it definitely works and I use it quite often.