Hide/show individual items on page load inside ngFor

Question

My question is really similar too this one

The difference is: I have to show a textarea based at first on the default language then with the selected language. I have one textarea per language and only one can shows up at a time. I can apply the answer of Thierry Templier to get the tab like behavior without any problem.

Here the code: I render a set of radio button option with a default language.

<div *ngFor="let language of model.appLanguages" style="display:inline">
    <input type="radio" name="title"
           id="language.languageId"
           [checked]="language.isDefault" /> {{ language.displayName }} 
  </div>

Then I have to show a textarea based at first on the default language then with the selected language

<div [(hidden)]="showDefaultFirst(text.languageId)" class="row" *ngFor="let text of model.texts">
  <div id="{{text.languageId}}" class="col-sm-12">
    <editor [(ngModel)]="text.content" [ngModelOptions]="{standalone: true}" apiKey="..."></editor>
  </div>
</div>

The code behind is like the answer of Thierry Templier. Any idea how to add the extra step of to hide elements on page load based on the default value?

Answer 1

You need to use *ngIf and check for the condition and rendeer the necessary template.

<div *ngFor="let language of model.appLanguages" style="display:inline">
<ng-container *ngIf="showDefaultFirst(text.languageId)">
    <input type="radio" name="title"
           id="language.languageId"
           [checked]="language.isDefault" /> {{ language.displayName }} 
</ng-container>
</div>