multiple templates angular 4

Question

supose these divs inside a component:

<div ngIf="condition1">   
<button (click)="set_condition1_false_and_2_true()">show-template-2</button> 
</div>

<div ngIf="condition2>   
<button (click)="set_condition2_false_and_3_true()">show-template-3</a> 
</div>

<div ngIf="condition3>   
<a>Last Template</a>
</div>

assuming the typescript is working right with the booleans, what i need to do to make this view?

(observation) with two divs i make it works:

<div *ngIf="condition1; else secondTemplate>
  <button (click)="make_condition1_false_and_2_true()">showSecondTemplate
</button>
</div>

<ng-template #secondTemplate>
  <a>Second Template Works</a>
</ng-templante>

but i need three templates in the same component

You might want to break your "different templates" into separate components and render these child components in a parent component. — Kyle Pfromer
– Kyle Pfromer, Commented Feb 26, 2018 at 4:29

William Ritson · Accepted Answer · 2018-02-26 05:21:56Z

2

The simplest, but probably not the best, way would be to simply check the other conditions are not true in your *ngIf statements.

Omitting all the code other than the ifs

<div *ngIf="!condition2 && !condition3 && condition1">   

<div *ngIf="!condition1 && !condition3 && condition2">   

<div *ngIf="!condition1 && !condition2 && condition3>

Alternatively you could use NgSwitch. This is easy if all your conditions are based on the same variable, but assuming they are not you can do it using a helper function.

<div [ngSwitch]="getState()">
  <div *ngSwichCase="1">   
  <div *ngSwichCase="2">   
  <div *ngSwichCase="3"> 
</div>

Then in your typescript define the getState function using if/then/else

getState() {
  if (condition1) {
    return 1;
  } else if (condition2) {
    return 2;
  } else {
    return 3;
  }
}

In your real code you would want to use a more meaningful name and also return an Enumeration value with a meaningful name rather than magic numbers.

edited Feb 26, 2018 at 5:21

answered Feb 26, 2018 at 3:02

William Ritson

1231 silver badge4 bronze badges

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

4 Comments

André Costa Over a year ago

ok. but considering that the first way you did won't work because the the next divs won't render (the divs with ngIf was my first attempt. it doesn't work), you are sure that ngswitch support render next divs based on conditions changed by buttons? because, you know, this is the problem to deal with <ng-template>

William Ritson Over a year ago

I am no longer sure what you are trying to accomplish. Do you want exactly one of the three blocks to be displayed at any times or are multiple of them supposed to be displayed? Your first example would work if you want to allow more than one to be displayed at a time (if you fixed the unclosed tags).

André Costa Over a year ago

yeah, maybe there's something wrong with my angular. the ng switch is adding the second div to the template when the button is clicked, but the first isn't disappearing. with the ngIf was happening the opposite. the first was removed but the second wasn't rendering. the only way it worked was with ng-template and ngif/else. but only with two templates.

André Costa Over a year ago

now works. the problem was, i had some problems with the service on ts. thanks.

Collectives™ on Stack Overflow

multiple templates angular 4

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related