Search code examples
angularngfor

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


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?


Solution

  • 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}`);
            }
      }
    }