CODEWITHSUNDEEP
javascriptangular
Konrad Viltersten
Konrad Viltersten

Reputation: 39210

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() {
  this.back = this.back.replace(/[ ]?shown/, "");
  this.front = this.front.replace(/[ ]?shown/, "");
}

show() {
  this.back += "shown";
  this.front += "shown";
}

The problem is that I wish the popup to be invokeable from other components, without it being a part of them. In fact, the markup for the application I'm aiming at is as follows.

<navbar></navbar>
<sidebar></sidebar>
<filter></filter>
<poppy></poppy>

I'm not sure how to invoke it, though. I'm reacting to a click in the navigation bar and detecting that the request is supposed to trigger the popup to pop up.

if(notImplementedYet) {
  ???
}

I've googled the issue but I'm not really getting a clear image of the proper way to approach it. For instance, I've seen something about Input and Output here but I can't judge if it's even remotely applicable for my need.

I also saw this but it doesn't tell me much, possibly due to lack of experience with Angular. Also, I worry that the parent-to-child/child-to-parent approach will result in a very nasty invokation structure.

Upvotes: 1

Views: 2712

Answers (2)

Faly
Faly

Reputation: 13356

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'
})
export class NavComponent {
    @Output() onClickNav: EventEmitter<any> = new EventEmitter(); 
    onClick():void {
        this.onClickNav.emit(null);
    }
}

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

Upvotes: 1

maxeber
maxeber

Reputation: 71

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.

Upvotes: 0

Related Questions