How do i update variable globally in Angular typescript or jquery.?

Question

When I update this.showPlan = true; i guess it is not updatiing globally because when clicking on document it is still showing as false instead of true

This is my HTML code:

<li (click)="displayPlanWidget()"></li>
<div style="display: none;" id="planTabInput">----</div>

This is my type script code:

public showPlan:boolean = false;     //For showPlan

ngOnInit() {
    var arg1 = this.showPlan;
    var arg2 = this.showAccount;

    console.log('arg1--------'+arg1); //coming fine on initial
    jQuery(document).click({showPlan:arg1},function(e) {
        console.log('showPlan--------'+e.data.showPlan); //coming as false insted true

        if(e.data.showPlan != 'false') { //this should trigger (not triggering because it is not updating to true)
            jQuery("#planTabInput").css( "display",'none' );
        }
    });
}


public displayPlanWidget() {
    this.showPlan = true;

  console.log('showPlan Changed to '+this.showPlan); //coming true(fine) 

  jQuery("#planTabInput").show();
}

Where I am doing wrong help is appreciated.

Here is the link csharp-video-tutorials.blogspot.in/2017/08/… — Swanand Taware
– Swanand Taware, Commented Feb 22, 2018 at 9:43

mehany · Accepted Answer · 2018-02-22 07:05:02Z

2

This is really all you need for the functionality you need to implement. Angular recommends avoiding direct DOM manipulation

<li (click)="displayPlanWidget()"></li> <div [hidden]="!showPlan" id="planTabInput">----</div>

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

public showPlan = false;     //For showPlan
public showAccount = true; //For showAccount
@Output('activeWidget') activeWidget = new EventEmitter<string>();

public toggleWidget() {
    this.showPlan = !this.showPlan;
    this.showAccount = !this.showAccount;
    this.activeWidget.next((this.showAccount ? 'showAccount' : 'showPlan'))
}

edited Feb 22, 2018 at 7:05

answered Feb 22, 2018 at 6:52

mehany

4,3072 gold badges20 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Prasanth S Over a year ago

how it's known to other components.?

Mr world wide Over a year ago

@mehany apart from toggle I want Popup should be closed when I click outside of the both popup's

mehany Over a year ago

If you need some UI components, you probably better off using existing community modules and read the docs. Consider this project for example github.com/akveo/ngx-admin, you can learn a lot from it and reuse its components

Collectives™ on Stack Overflow

How do i update variable globally in Angular typescript or jquery.?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related