how to set components "active"?

[Reza Razavipour]

I have a list of buttons, when pressed, they will have a corresponding component that will get rendered.

<h3 class="first">Parent</h3>

<p-selectButton
        [options]="metrics"
        [(ngModel)]="selectedMetric"
        (onChange)="onChange($event)"
></p-selectButton>

<div *ngIf="selectedMetric ==='Metric 1'">
    Selected {{selectedMetric}}
    <c1></c1>
</div>

<div *ngIf="selectedMetric ==='Metric 2'">
    Selected {{selectedMetric}}
    <c2></c2>
</div>

I need to set a component specific when c1 or c2 is shown. when selectedMetric is 'Metric 1", I need to set 

active flag for component c1 to true and c2 active flag should be false.

Is there an event I can use for c1 and c2 for "show" "hide" that I can use to set the active flag there?

What is the recommended way of doing this?

[Sander Elias]

Hi Reza,

You want to set a flag inside the ngIf, or outside? You are aware that ngIf takes its content out of the DOM when it's false right? 

Regards

Sander

[Reza Razavipour]

I need to set the flag after selectedMetric is getting changed.

How to?

[Sander Elias]

Hi Reza, 

I understood that the first time around, but on what place in your template? inside the ngIf or outside the ngIf?

[Reza Razavipour]

outside please

Regards,
Reza

On Thu, Aug 17, 2017 at 4:42 AM, Sander Elias <sande...@gmail.com> wrote:

Hi Reza, 

I understood that the first time around, but on what place in your template? inside the ngIf or outside the ngIf?

--
You received this message because you are subscribed to a topic in the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/pV3Dm3KSw78/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+unsubscribe@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Sander Elias]

Hi Reza,

Depending on what kind of element you want to show/hide, you can, for example, put another *ngIf on it. Or use [hidden]='selectedMetric ==='Metric 2` 

Or use classlist or the ngClass or one of the other way's angular hands you to manipulate the dom. 

Regards

Sander

[Reza Razavipour]

Hi Sander,

Sorry for being so dense :(

Actually I am learning that ngIf does a destroy of the component when the condition changes. If that is the case, I am on the wrong track.

What I want looking to do is, on  a button click, show a component and only hide whatever was in its place. Not destroying. Additionally, set a flag for the component that is currently shown.

Similar to gmail and the different folders on the left column.

I know they use routes. Any way to do that without routes?

Regards,
Reza

--