javascript - Angular 4 show popup onclick by other component -


i'm struggling problem , can't figure out. need show popup div situated in page clicking menu entry in navbar.component.

i added property "show" in popup prints "show" class on div using ngclass (with if) directive. can working if action button inside popup component cannot print show class clicking on component. property in object updated class not printed. i'm using angular 4 ng-bootstrap. tried both services , parent/child emit event.

this is 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} '@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} '@angular/core'; import {authservice} '../services/auth.service'; import {iuser} './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 false         this.show = true;         console.log(this); //show true not trigger show class     }      closepopup() {         this.show = false;     } }

the issue here nav-bar , login components siblings , can't directly communicate each other. have show output of navbar , input of login, haven't connected dots.

you need update app.component connect them.

export class appcomponent implements oninit {     show = false;     onshow() { this.show = true; } }

and in template:

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

there's lot of 2 way binding going on here works simple liek this, it's bad idea leads unmaintainable code. should choose 1 owner of show variable , force changes through him. in case app component logical owner, i'd change login component emit event changes show variable in app component adn remove 2 way bindings, in bigger app, may want separate service manages hiding/showing pop ups. eliminates need sending message , down component tree, can inject service it's needed.

as commenter mentioned, should using ngclass class manipulation 

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

a service based solution like

import {subject} '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 provide in app module or @ app component level:

providers:[popupservice]

make sure don't re provide later, want 1 copy exist shares it.

then inject both components, , have them call services close or show pop methods.

then in login component bind popup$ observable like

constructor(private popupsvc:popupservice){} show$; ngoninit() { this.show$ = this.popupsvc.showpopup$; } showpopup() { this.popupsvc.showpopup(); } closepopup() { this.popupsvc.closepopup(); }

and in template subscribe w async pipe like

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

the reason using async pipe garbage collection managemetn simpler. if don't use async, need garbage collect manually in ngondestroy calling unsubscribe(), otherwise subscriptions keep stacking up. there more nuanced benefit in async pipe triggers change detection, becomes important if start using onpush change detection performance optimization.


Comments

Post a Comment

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m...
Read more

python Tkinter Capturing keyboard events save as one single string -

is possible store keyboard events 1 string? code below stores 1 char , prints it. card reader or bar code reader, contains collection of character/ string not 1 character @ time. goal save char pressed text variable. from tkinter import * root = tk() def key(event): text= event.char text+= event.char print ("pressed", text) def callback(event): frame.focus_set() print ("clicked at", event.x, event.y) frame = frame(root, width=100, height=100) frame.bind("<key>", key) frame.bind("<button-1>", callback) frame.pack() root.mainloop() currently, creating text variable , everytime key() function gets called, , text stores last character typed. you can define text module level variable , , use module level text inside key function - text = '' def key(event): global text text+= event.char print("pressed", text)
Read more

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -

here tables: create table customer ( cid int primary key, name varchar(32) ) create table ord ( oid int primary key, cid int foreign key references customer, address varchar(20) ) here's linq-to-sql statement: var aaa = c in db.customer select new { c, o = c.ord.tolist() }; and here's inexplicable query generated linq-to-sql: select [t0].[cid] [cid], [t0].[name] [name], [t1].[oid] [oid], [t1].[cid] [cid2], [t1].[address] [address], (select count(*) [dbo].[ord] [t2] [t2].[cid] = [t0].[cid]) [value] [dbo].[customer] [t0] left outer join [dbo].[ord] [t1] on [t1].[cid] = [t0].[cid] order [t0].[cid], [t1].[oid] i want understand how rid of count(*) part. it's entirely uncalled for! linq needs count(*) in order determine number of entries returned o = c.ord.tolist() .
Read more