I have a simple problem, but I'm a beginner so I can't understand the logic,
I have 2 buttons one and two, when I click on one I would like to display instead of one and two the other buttons so three and four? made a switch.
What is the best way to do this? Is using if else in the HTML correct or should we move this logic to the ts file?
Thanks in advance.
html
<div *ngIf="!isButtons">
<button> one</button>
<button> two</button>
</div>
<div>
<button> three</button>
<button> four</button>
</div>
ts.file
isButtons:boolean = false;
The logic is simple enough to remain in the template, you don't need any more code in your component. A simple (click) and a <ng-template> will do the trick:
<div *ngIf="!isButtons; else threeAndFour">
<button (click)="isButtons=true"> one</button>
<button> two</button>
</div>
<ng-template #threeAndFour>
<div>
<button> three</button>
<button> four</button>
</div>
</ng-template>
Given your code example, you can just
*ngIf="isButtons" to the second div so you'll handle the final state(click)="isButtons = true"Final snippet:
<div *ngIf="!isButtons">
<button (click)="isButtons = true"> one</button>
<button> two</button>
</div>
<div *ngIf="isButtons">
<button> three</button>
<button> four</button>
</div>
Jeremy Thille's answer is just as good, but most likely not something a beginner can handle (ng-template and more complex *ngIf usage).