Instantiate an ng2-bs3-modal component from a navbar button click

Question

I want to instantiate a component called login.component that is a ng2-bs3-modal 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.

Here is my html for the button on the navbar:

        <li class="nav-item">
            <button type="button" class="as-text nav-link 
            text-uppercase" data-toggle="modal" data-target="#myModal">
                login
            </button>
        </li>

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 ng2-bs3-modal. How would I cause the click on the html button in the navBar to instantiate my login.component?

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

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

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

login.component.ts:

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 {}

Here is my full navbar.component.html:

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

navbar.component.ts:

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 { 
}

Here is my attempt:

change the navbar button html to this and under the <navbar> add the login.component html selector:

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

add the #modal as a viewChild in navbar.component:

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

Getting this error:

TypeError: self._LoginComponent_48_4.open is not a function

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

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

BeniaminoBaggins BeniaminoBaggins · Accepted Answer · 2016-09-08T08:45:51

Changed navbar html to this:

            <li class="nav-item">
                <button type="button" class="as-text nav-link 
                text-uppercase" (click)="openModal()">
                    login
                </button>
            </li>
            <li class="nav-item">
                <a class="nav-link signup" [routerLink]="['/register']" 
                routerLinkActive="active">sign up free</a>
            </li>
        </ul>
    </div>
</div>

navbar.component.ts:

export class NavbarComponent { 
    @ViewChild('modal') modal;

    openModal() {
        this.modal.open();
    }
}

login.component.ts:

export class LoginComponent {
  @ViewChild('modal') modal;

  open() {
    this.modal.open();
  }

}

login.component.html:

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

Instantiate an ng2-bs3-modal component from a navbar button click

1 Answers