Custom html using angular

Question

I want to use this html an loop for angular

<div >
<select class="selectpicker" data-live-search="true">
<option data-tokens="ketchup mustard1">Hot Dog, Fries and a Soda</option>
<option data-tokens="mustard2">Burger, Shake and a Smile</option>
<option data-tokens="frosting3">Sugar, Spice and all things nice</option>
</select>
</div>

When use

<select class="/*form-control*/ selectpicker" data-live-search="true" name="{{'idCoin'+i}}" [(value)]="customer.idCoin" required>
<option *ngFor="let item of idCoinlist" [value]="item.id" data-tokens="{{item.id}}">{{item.name}}</option>
</select>

Show error: Can't bind to 'tokens' since it isn't a known property of 'option'.ng

HOw i can use loop with custom html? Thanks!

Use attribute binding syntax. Check this [answer](https://stackoverflow.com/a/34542844/9471852) — Siddhant, Jan 29 '22 at 04:23

score 1 · Answer 1 · answered Jan 29 '22 at 19:07

1

Fixed answer:

<select class="/*form-control*/ selectpicker" data-live-search="true" name="{{'idCoin'+i}}"
          [(value)]="customer.idCoin" required>
          <ng-container *ngFor="let item of idCoinlist; index as i">
            <option [value]="item.id" [attr.data-tokens]="item.id">{{item.name}}
            </option>
          </ng-container>
        </select>

answered Jan 29 '22 at 19:07

user3750252

31
5

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 29 '22 at 21:37

Joosep Parts · Accepted Answer · 2022-01-29T19:24:10.673

I am placing the *ngFor loop in ng-container. ng-container does not get rendered, rather the contents of it will be.

You were missing i, I am guessing it should come from loop index, so I added that as index.

customer.idCoin can't be referenced. I am guessing prop customer is on item? Added this as well. But check this part over yourself. You haven't provided what the data structure is like.

{{item.id}} for the tokens, does not need to be enclosed in brackets. However {{item.name}} does need to be. When you want to print something in html literal (the part which user can see) you wrap it in {{}} to bind it. To use it as a value in the html tag - you don't wrap it.

<select class="/*form-control*/ selectpicker" data-live-search="true" name="{{'idCoin'+i}}"
          [(value)]="customer.idCoin" required>
          <ng-container *ngFor="let item of idCoinlist; index as i">
            <option [value]="item.id" [attr.data-tokens]="item.id">{{item.name}}
            </option>
          </ng-container>
        </select>

Thanks! With some fixes it works! – user3750252 Jan 29 '22 at 19:06 — user3750252, Jan 29 '22 at 19:06

Custom html using angular

2 Answers2