How to bind in angular conditionally in *ngFor?

Question

I have html that looks something like this:

  <as-split unit="pixel" #mainViewSplit class="custom-gutter" direction="horizontal" gutterSize="2">
    <ng-container *ngFor="let splitItem of splitData">
      <as-split-area [id]="splitItem.id" *ngIf="(splitItem.isVisible$ | async)" 
      [order]="splitItem.order">
      <ng-container *ngTemplateOutlet="splitItem.template"></ng-container>
      </as-split-area>
    </ng-container>
  </as-split>

This works fine for split items that have id. But some of them are undefined and then there shouldn't be id at all in html. But for items without id html looks like this:

id="undefined"

I also tried

[id]="splitItem.id ? splitItem.id : null"

because comment in this question suggest to use null, but it doesn't work. It just results in

id="null"

How to set binding so that there won't be id in html at all?

score 3 · Accepted Answer · answered Nov 12 '22 at 07:03

3

use [attr.id] in place of [id] if the value of splitItem.id is undefined the attribute id will not be added in the DOM

<as-split-area
  [attr.id]="splitItem.id"
  *ngIf="splitItem.isVisible$ | async"
  [order]="splitItem.order"
>
  <ng-container *ngTemplateOutlet="splitItem.template"></ng-container>
</as-split-area>

answered Nov 12 '22 at 07:03

Mr. Stash

2,940
3
10
24

1

Thanks. This was actually used in a question linked to the question i linked above. – char m Nov 12 '22 at 07:23

score 0 · Answer 2 · answered Nov 11 '22 at 19:04

0

Have you tried using index instead of id ? so that instead of undefined you will get a number in property [id].

Follow this:-

*ngFor="let splitItem of splitData; let i = index"

and then in your <as-split-area [id]="i">

answered Nov 11 '22 at 19:04

Nafees

21
5

Why would i want a random number there? – char m Nov 12 '22 at 07:24

score 0 · Answer 3 · answered Nov 12 '22 at 06:51

0

You can just set the id as an empty string if it is undefined. Like so

[id]="splitItem.id ? splitItem.id : ''"

answered Nov 12 '22 at 06:51

jspoh

104
9

I don't want empty string for id. i'm asking how to conditionally add it i.e. not add anything if it's not defined. Pls see the accepted answer. – char m Nov 12 '22 at 07:44

How to bind in angular conditionally in *ngFor?

3 Answers3