Instantiate an ng2-bs3-modal component from a navbar button click
<p>I want to instantiate a component called login.component that is a <a href="https://github.com/dougludlow/ng2-bs3-modal" rel="nofollow">ng2-bs3-modal</a> from a button click on a navbar. The only problem is that the two components are not related so I'm unsure how to connect them.</p>

<p>Here is my html for the button on the navbar:</p>

<pre><code>        &lt;li class="nav-item"&gt;
            &lt;button type="button" class="as-text nav-link 
            text-uppercase" data-toggle="modal" data-target="#myModal"&gt;
                login
            &lt;/button&gt;
        &lt;/li&gt;
</code></pre>

<p>At the moment it is not hooked up to my angular 2 login.component. It is hooked up to a regular modal which is hardcoded into index.html. I am converting over to use <a href="https://github.com/dougludlow/ng2-bs3-modal" rel="nofollow">ng2-bs3-modal</a>. How would I cause the click on the html button in the navBar to instantiate my login.component?</p>

<p>Here is my login.component.html (just the most basic modal for now):</p>

<pre><code>&lt;button type="button" class="btn btn-default" (click)="modal.open()"&gt;Open me!&lt;/button&gt;//*******!!!!! please not this button will be deleted

&lt;modal #modal&gt;
    &lt;modal-header [show-close]="true"&gt;
        &lt;h4 class="modal-title"&gt;I'm a modal!&lt;/h4&gt;
    &lt;/modal-header&gt;
    &lt;modal-body&gt;
        Hello World!
    &lt;/modal-body&gt;
    &lt;modal-footer [show-default-buttons]="true"&gt;&lt;/modal-footer&gt;
&lt;/modal&gt;
</code></pre>

<p>login.component.ts:</p>

<pre><code>import { Component, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { MODAL_DIRECTIVES } from 'ng2-bs3-modal/ng2-bs3-modal';

@Component({
  selector: 'login',
   templateUrl: 'app/shared/login.component.html',
   styleUrls: ['app/shared/login.component.css' ],
   directives: [MODAL_DIRECTIVES]
})
export class LoginComponent {}
</code></pre>

<p>Here is my full navbar.component.html:</p>

<pre><code>&lt;nav class="navbar navbar-dark navbar-fixed-top text-uppercase"&gt;
    &lt;div class="container-fluid"&gt;
        &lt;button     class="navbar-toggler hidden-md-up pull-xs-right" 
                    type="button" 
                    data-toggle="collapse" 
                    data-target="#nav-content"&gt;
                    &amp;#9776;
        &lt;/button&gt;
        &lt;a class="navbar-brand" [routerLink]="['/']" 
        routerLinkActive="active"&gt;vepo&lt;/a&gt;
        &lt;div class="collapse navbar-toggleable-sm" id="nav-content"&gt;
            &lt;ul class="nav navbar-nav pull-xs-right"&gt;
                &lt;li class="nav-item"&gt;
                    &lt;a class="nav-link" [routerLink]="['/about']" 
                    routerLinkActive="active"&gt;about&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;
                    &lt;a class="nav-link" [routerLink]="['/find']" 
                    routerLinkActive="active"&gt;find&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;
                    &lt;a class="nav-link" [routerLink]="['/add']" 
                    routerLinkActive="active"&gt;add&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;
                    &lt;button type="button" class="as-text nav-link 
                    text-uppercase" data-toggle="modal" data-target="#myModal"&gt;
                        login
                    &lt;/button&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;
                    &lt;a class="nav-link signup" [routerLink]="['/register']" 
                    routerLinkActive="active"&gt;sign up free&lt;/a&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/nav&gt;
</code></pre>

<p>navbar.component.ts:</p>

<pre><code>import { Component, ViewChild } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { LoginComponent } from './login.component';
@Component({
    selector: 'navbar',
    templateUrl: 'app/shared/navbar.component.html',
    styleUrls: ['app/shared/navbar.component.css'],
    directives: [ROUTER_DIRECTIVES, LoginComponent]
})
export class NavbarComponent { 
}
</code></pre>

<p>Here is my attempt:</p>

<p>change the navbar button html to this and under the <code>&lt;navbar&gt;</code> add the login.component html selector:</p>

<pre><code>                &lt;li class="nav-item"&gt;
                    &lt;button type="button" class="as-text nav-link 
                    text-uppercase" (click)="modal.open()"&gt;
                        login
                    &lt;/button&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;
                    &lt;a class="nav-link signup" [routerLink]="['/register']" 
                    routerLinkActive="active"&gt;sign up free&lt;/a&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/nav&gt;
&lt;login #modal&gt;&lt;/login&gt;
</code></pre>

<p>add the #modal as a viewChild in navbar.component:</p>

<pre><code>import { Component, ViewChild } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { LoginComponent } from './login.component';
@Component({
    selector: 'navbar',
    templateUrl: 'app/shared/navbar.component.html',
    styleUrls: ['app/shared/navbar.component.css'],
    directives: [ROUTER_DIRECTIVES, LoginComponent]
})
export class NavbarComponent { 
    @ViewChild('modal') modal;
}
</code></pre>

<p>Getting this error:</p>

<blockquote>
  <p>TypeError: self._LoginComponent_48_4.open is not a function</p>
</blockquote>

<p>because open is not a function of login.component.ts, it is a function of the modal plugin. </p>

<p>How do I correctly instantiate the login.component modal when clicking the button in the navbar?</p>