CODEWITHSUNDEEP
javascripthtmlangular
annepic
annepic

Reputation: 1397

parse array in html with javascript and render a different span each time

How can I make this code more general:

               <div class="xx" *ngIf="this.message.address">
                    <span class="helper" *ngIf="this.message.address">
                       {{ this.errorMessage.address[0] }} 
                    </span>
                    <span class="helper" *ngIf="this.message.address[1]">
                            {{ this.errorMessage.address[1] }} 
                         </span>
                </div>

so that this span is rendered multiple times for each array element:

          <span class="xx" *ngIf="this.message.address.forEach(x=> x">
               {{ this.errorMessage.address[x] }} 
            </span>

(my attempt above doesn't work by the way)

I could only make it work in the angular component, sth like:

this.message.address.forEach(x=> console.log(x))

but I'm not sure how to parse an array in html and render a different span in each case, which is what I really need

Upvotes: 0

Views: 87

Answers (1)

bugs
bugs

Reputation: 15313

What you are looking for is *ngFor, which can be used in your HTML to iterate over an array of elements.

<div class="xx" *ngFor="let ad of this.message.address">
  <span class="helper" *ngIf="ad">
    {{ ad }} 
  </span>
</div>

Upvotes: 1

Related Questions