CODEWITHSUNDEEP
javascriptangulartypescript
SBO
SBO

Reputation: 623

Angular 4 show popup onclick by other component

i'm struggling about this problem and can't figure out. I simply need to show a popup div situated in the page clicking from a menu entry in my navbar.component.

I added a property "show" in my popup which prints the "show" class on my div using the ngClass (with if) directive. I can get this working if the action button is inside my popup component but i cannot print the show class clicking on another component. The property in the Object get updated but the class is not printed. I'm using angular 4 with ng-bootstrap. I tried both with services and with parent/child emit event.

This is is my situation:

app.component.html

<app-nav-bar></app-nav-bar>
<app-login></app-login>
<router-outlet></router-outlet>
<app-footer></app-footer>

navbar.component.html

...
 <button class="dropdown-item" (click)="showPopup()">LOGIN</button>
...

navbar.component.ts

import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'app-nav-bar',
    templateUrl: 'navbar.component.html',
    styleUrls: ['./navbar.component.css'],
})

export class NavbarComponent implements OnInit {
    @Output() show = new EventEmitter<boolean>();

    ngOnInit() {
    }


    showPopup() {
        this.show.emit(true);
    }
}

login.component.html

<div id="wrapper-login-popup" class="fade-from-top" [(class.show)]="show">
    <div id="container-login-popup">
        <div class="row">
            <div class="col-sm-12 text-center">
                <img id="popup-bomb" src="assets/images/bomb.png" alt="bomb"/>
                <img id="popup-close" class="close-icon" src="assets/images/close.png" alt="close"
                     (click)="closePopup()"/>
            </div>
        </div>
   </div>
</div>

login.component.ts

import {Component, Input, OnInit} from '@angular/core';
import {AuthService} from '../services/auth.service';
import {IUser} from './user';

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

export class LoginComponent implements OnInit {
    private username: string;
    private password: string;

    @Input() show: boolean = false;

    constructor(private AuthService: AuthService) {
    }

    ngOnInit() {
    }

    login() {
        ...
    }

    showPopup() {
        console.log(this); //Show is false
        this.show = true;
        console.log(this); //Show is true but does not trigger the show class
    }

    closePopup() {
        this.show = false;
    }
}

Upvotes: 2

Views: 42440

Answers (1)

bryan60
bryan60

Reputation: 29335

The issue here is that your nav-bar and login components are siblings and can't directly communicate with each other. You have show as an output of navbar and as an input of login, but you haven't connected the dots.

You need to update your app.component to connect them.

export class AppComponent implements OnInit {
    show = false;
    onShow() { this.show = true; }
}

and in the template:

<app-nav-bar (show)="onShow()"></app-nav-bar>
<app-login [(show)]="show"></app-login>

There's a lot of two way binding going on here which works for something simple liek this, but generally it's a bad idea as it leads to unmaintainable code. You should choose one owner of the show variable and force all changes to it through him. In this case the app component is the most logical owner, so I'd change the login component to emit an event that changes the show variable in app component adn remove all 2 way bindings, but in a bigger app, you may even want a separate service that manages hiding/showing pop ups. This eliminates the need for the sending a message up and down your component tree, you can inject the service where it's needed.

As another commenter mentioned, you also should be using ngClass for class manipulation like 

[ngClass]="{'show':show}"

a service based solution would look like

import {Subject} from 'rxjs/Subject';
@Injectable()
export class PopUpService {
    private showPopUpSource = new Subject();
    showPopUp$ = this.showPopUpSource.asObservable();
    showPopUp() { this.popUpSource.next(true); }
    closePopUp() { this.popUpSource.next(false); }
}

Then you provide in app module or at app component level:

providers:[PopUpService]

make sure you don't re provide this later, as you only want one copy to exist so everyone shares it.

then inject into both components, and have them call the services close or show pop up methods.

then in the login component you bind to the popUp$ observable like

constructor(private popUpSvc:PopUpService){}
show$;
ngOnInit() { this.show$ = this.popUpSvc.showPopUp$; }
showPopUp() { this.popUpSvc.showPopUp(); }
closePopUp() { this.popUpSvc.closePopUp(); }

and in the template subscribe w async pipe like

<div id="wrapper-login-popup" class="fade-from-top" [ngClass]="{'show': (show$ | async) }">

The reason for using the async pipe is garbage collection managemetn is simpler. If you don't use async, you need to garbage collect manually in ngOnDestroy by calling unsubscribe(), otherwise your subscriptions will keep stacking up. There is also a more nuanced benefit in that the async pipe triggers change detection, but this only becomes important if you start using onPush change detection for performance optimization.

Upvotes: 4

Related Questions