How can I pass data array in list in angular html dynamically

Question

I am trying to pass data array object to html list dynamically.

 <div class="sidebar" *ngFor="let q of obj">
        <h4>Approvals</h4>

        <ul  *ngFor="let c of q.element">
            <li>
                <a href="#"><img class="sideico" src="../../../assets/images/icons/BRIA.svg" />{{c}}</a></li>
        </ul>
</div>

In ts file

 obj = [
          {
            "element" : "Timesheet",
            "icon": "../../../assets/images/icons/BRIA.svg"
          },
          {
            "element" : "Timesheet",
            "icon": "../../../assets/images/icons/BRIA.svg"
          }
];

I am new in Angular. What is wrong?

q.element is a string you can't use ngFor for that. What is the aim of second for loop? @OM-ॐ — Cagri Tacyildiz
– Cagri Tacyildiz, Commented Jul 20, 2020 at 14:07

Cagri Tacyildiz · Accepted Answer · 2020-07-20 14:12:27Z

1

Demo You need just one loop

 <div class="sidebar" >
     <h4>Approvals</h4>
     <ul  *ngFor="let q of obj">
        <li>
            <a href="#"><img class="sideico" [src]="q.icon | safe : 'url'" />{{q.element}}</a>  
        </li>
    </ul>
           
</div>

and use custom safe pipe to bind

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';

@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {

  constructor(protected sanitizer: DomSanitizer) {}
 
 public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
            case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
            case 'style': return this.sanitizer.bypassSecurityTrustStyle(value);
            case 'script': return this.sanitizer.bypassSecurityTrustScript(value);
            case 'url': return this.sanitizer.bypassSecurityTrustUrl(value);
            case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value);
            default: throw new Error(`Invalid safe type specified: ${type}`);
        }
  }
}

answered Jul 20, 2020 at 14:12

Cagri Tacyildiz

17.7k6 gold badges38 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nitin9nair Over a year ago

You are supposed to iterate the list item not the whole list which is wrong.

nitin9nair · Accepted Answer · 2020-07-20 14:19:22Z

1

There is no need to iterate it twice. You just need to iterate it once as shown below:

 <div class="sidebar">
        <h4>Approvals</h4>

        <ul>
            <li  *ngFor="let q of obj">
                <a href="#"><img class="sideico" [src]="q?.icon" />{{ q?.element }}</a>
            </li>
        </ul>
</div>

edited Jul 20, 2020 at 14:19

answered Jul 20, 2020 at 14:11

nitin9nair

5984 silver badges12 bronze badges

4 Comments

OM-ॐ Over a year ago

why q? ?? Can you explain .

nitin9nair Over a year ago

Google safe navigation operator. This will help you if the data is undefined or the object does not exist.

Cagri Tacyildiz Over a year ago

you dont need safe operation there. U are already in loop array if array is null you never enter there. Safe operations is good for object binding.

OM-ॐ Over a year ago

Same will go for src ?

Collectives™ on Stack Overflow

How can I pass data array in list in angular html dynamically

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related