Tengo un problema simple, pero soy un principiante, así que no puedo entender la lógica.
Tengo 2 botones uno y dos, cuando hago clic en uno me gustaría mostrar en lugar de uno y dos los otros botones, ¿entonces tres y cuatro? hizo un cambio.
¿Cuál es la mejor manera de hacer esto? ¿Es correcto usar if else en el HTML o deberíamos mover esta lógica al archivo ts?
Gracias por adelantado.
html
<div *ngIf="!isButtons"> <button> one</button> <button> two</button> </div> <div> <button> three</button> <button> four</button> </div>ts.archivo
isButtons:boolean = false;La lógica es lo suficientemente simple como para permanecer en la plantilla, no necesita más código en su componente. Un simple (click) y una <ng-template> harán el truco:
<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>Dado su ejemplo de código, puede simplemente
*ngIf="isButtons" al segundo div para que pueda manejar el estado final(click)="isButtons = true"Fragmento final:
<div *ngIf="!isButtons"> <button (click)="isButtons = true"> one</button> <button> two</button> </div> <div *ngIf="isButtons"> <button> three</button> <button> four</button> </div> La respuesta de Jeremy Thille es igual de buena, pero lo más probable es que no sea algo que un principiante pueda manejar ( ng-template y uso más complejo *ngIf ).