Clash Royale CLAN TAG#URR8PPP

*ngIf based on another *ngIf

Using Angular, I have created the following code with two *ngFors and two *ngIfs.

*ngFor

*ngIf

<div *ngFor="let contact of contactList">
<span>contact.name.formatted</span>
<div *ngFor="let number of contact.phoneNumbers">
<span *ngIf="number.type == 'mobile'">number.value</span>
</div>
</div>


How can I hide the first span if the second is hidden? I know I can do this by using JavaScript loops but I'd like to do this in the template if possible.

1 Answer
1

You are going to use the same ngIf on the first span since you want to hide the 2nd and 1st span. So you should use the first span within the ngFor

<div *ngFor="let number of contact.phoneNumbers">
<ng-container ngIf="number.type == 'mobile'">
<span>contact.name.formatted</span>
<span>number.value</span>
</ng-container>
</div>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.