I was experimenting with a radio button on the interface linked to a property in the typescript file that controls the visibility of another div. However, I noticed that both *ngIf="isFooSelected" and [hidden]="!isFooSelected" only function upon initial page load. Is there an alternative approach for achieving this using typescript? Should I resort to CSS techniques like toggling classes to manipulate height?
Here is the code as requested. Apologies for assuming it was too basic to be relevant to my specific problem.
.html:
<div class="ui-g-12"><p-radioButton name="group2" value="true" label="Shared" [(ngModel)]="isPouchesShared"></p-radioButton></div>
<div class="ui-g-12"><p-radioButton name="group2" value="false" label="Individual" [(ngModel)]="isPouchesShared"></p-radioButton></div>
<div [hidden]="!isPouchesShared">
isPouchesShared == true
</div>
<div *ngIf="isPouchesShared">
isPouchesShared == true
</div>
.ts:
export class FooComponent {
isPouchesShared: boolean = true; }