angular - How to use for loop

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  colors = [
    'red',
    'green',
    'blue',
    'yellow',
    'orange',
    'pink'
  ];
}

app.component.html

<h2>Angular For Loop</h2>

<div *ngFor="let color of colors">
    <h3>{{color}}</h3>
</div>

More Angular tutorials

• angular - How to use if then condition
• angular - How to use if statement
• angular - Multiple condition
• angular - How to use switch case default
• angular - How to bind style
• angular - How to bind multiple style
• angular bootstrap - Dismissible alert
• angular bootstrap - Danger warning success alert
• angular bootstrap - Alert closed event
• angular bootstrap - Datepicker navigate to current month
• angular bootstrap - Datepicker navigate to specific year month
• angular bootstrap - Datepicker navigate select specific date
• angular bootstrap - Select Nav tab on button click
• angular bootstrap - Prevent selecting a tab in Nav
• angular bootstrap - How to enable disable tab in Nav