Angular2 change variable of different class

Question

I have 3 classes in my ng2 Application. The first class manages, which directive is being used by an *ngIf, which by default includes the second class. And in the template of the second class I want to change the directive name from the first class, which would then trigger the first class to recheck the if statement and than select the third class.

Or generally said, is it bad practise to check with *ngIf for the directive to use?

Edit:

as stated by Günter Zöchbauer, here is some Code for what i try to do:

/app/app.component.ts:

template: `
    <div *ngIf="template == 'menu'">
        <menu></menu>
    </div>
    <div *ngIf="template == 'entry'">
        <entries></entries>
    </div>
`
[...]
export class AppComponent {
    public template = "menu";

    public setTemplate(newTemplate: string) {
        this.template = newTemplate;
    }
}

/app/menu/menu.component.html:

[...]
(click)="setTemplate('entry')"
[...]

Now I am looking for something to call setTemplate('entry') from the app.component.ts instead of menu.component.ts

Can you please add some code that demonstrates what you try to accomplish (components with templates)? — Günter Zöchbauer
– Günter Zöchbauer, Commented Feb 13, 2016 at 18:45

Tamas Hegedus · Accepted Answer · 2016-02-13 22:18:57Z

1

I think you should use an EventEmitter inside the menu component, so your source could look like this:

/app/menu/menu.component.html:

[...]
<div (click)="fireMyEvent('categories')">Categories</div>
<div (click)="fireMyEvent('entries')">Entries</div>
[...]

@Output() myEvent: EventEmitter<string> = new EventEmitter();
fireMyEvent(evtParam: string) {
    this.myEvent.emit(evtParam);
}

/app/app.component.ts:

template: `
    <menu (myEvent)="setTemplate($event)"></menu>
    <div *ngIf="template == 'categories'">
        <categories></categories>
    </div>
    <div *ngIf="template == 'entries'">
        <entries></entries>
    </div>
`
[...]

Or what about handling the click event of the menu component itself from the outside?

/app/app.component.ts:

    <div *ngIf="template == 'menu'">
        <menu (click)="setTemplate('menu')"></menu>
    </div>

edited Feb 13, 2016 at 22:18

answered Feb 13, 2016 at 19:04

Tamas Hegedus

30.1k12 gold badges67 silver badges102 bronze badges

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

11 Comments

Ivan Sieder Over a year ago

it should be this.myEvent.emit(null). Right?

Ivan Sieder Over a year ago

Yeah, thank you very much, that's precisely what I needed to do!

Ivan Sieder Over a year ago

But what, if I would need to pass the new template to fireMyEvent() so that it's not hardcoded setTemplate('menu')

Tamas Hegedus Over a year ago

You can supply a value to the event by myEvent.emit("something")

Tamas Hegedus Over a year ago

Yes, I should've mentioned $event.

|

Günter Zöchbauer · Accepted Answer · 2016-02-13 18:53:43Z

0

You can add a template variable #menu.

If the tag where you add it is a native element, it hold a reference to the DOM element. If it is an Angular component you get a reference to the component.
In expressions you can reference it like

<menu #menu (click)="menu.setTemplate($event)"></menu>

answered Feb 13, 2016 at 18:53

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

3 Comments

Ivan Sieder Over a year ago

well, but how does that will work? I have the *ngIf in the /app/app.component.ts and the menu and menu template is in app/menu/. So where should i exactly add that?

Günter Zöchbauer Over a year ago

I can't see from your question or from the comments where you want to call it from. If the element is removed because the expressin in ngIf is false then there is nothing to call from or to because it doesn't exist.

Ivan Sieder Over a year ago

The solution from Tamas Hegedus seems to work fine for what I need, thanks anyway for your effort!

Collectives™ on Stack Overflow

Angular2 change variable of different class

2 Answers 2

11 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related