How Can A Component In Angular 2 Pop Up Another Component By Invoking Its Method?

I've designed a popup component and it's intended to show and hide by invokation of the following methods setting back and front variables that the class of it is bound to. hide()

Solution 1:

You can use @Output in the component from which you want to invoke the popup. You can then simply use template variable to invoke the show or hide methods in the popup component.

For example, you can show your popup when clicking in nav bar by the code:

import { Component, Output, EventEmitter } from'@angular/core';
@Component({
    selector: 'navbar',
    templateUrl: './nav-bar.component.html'
})
exportclassNavComponent {
    @Output() onClickNav: EventEmitter<any> = newEventEmitter(); 
    onClick():void {
        this.onClickNav.emit(null);
    }
}

<navbar (onClickNav)="popup.show()"></navbar>
<poppy #popup ></poppy>

Solution 2:

You might be looking for ViewChild.

Basically you can instance a ViewChild variable which reference the child component and then you can call its methods.