*ngFor Angular Directive

The *ngFor directive (predefined by Angular) lets you loop through data.

In this tutorial, we will demonstrate how to use the *ngFor directive to show all of the values in an array property within an Accordion UI component. Each Accordion Item is dynamically created and the header and content of the item display a value from the bound array property.

You can use the steps below:

1. ng new my-project
2. cd my-project.
3. ng add smart-webcomponents-angular.
4. ng-serve and in your browser enter localhost:4200.
5. Navigate to the \src\app folder.
6. Open app.module.ts and add the AccordionModule:

   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';
   
   import { AppComponent } from './app.component';
   import { AccordionModule } from 'smart-webcomponents-angular/accordion';
   
   @NgModule({
     declarations: [
       AppComponent
     ],
     imports: [
       BrowserModule, AccordionModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

7. Open app.component.ts and add the 'heroes' variable.

   
   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent {
     heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];  
   }
   

8. Now use the Angular ngFor directive in the template to display each item in the heroes list. Open app.component.html and put the following content:

    
   <smart-accordion> 
       <smart-accordion-item [label]="hero" *ngFor="let hero of heroes"> 
         {{ hero }} Content
       </smart-accordion-item> 
   </smart-accordion>
   

9. Output:
   
   
   
   

Example