How to repeat HTML element multiple times using ngFor based on a number?

In Angular ngFor is directive which accomplishes the motive of displaying repeated or list of contents with least lines of code, this serves the same purpose as for loops in conventional programming languages.

We can print repeated lines of content based on a number using the javascript/typescript function Array() which will generate a list of number from 0 to n-1. We traverse this list to produce n repeated lines of content.

Example 1:
Demo.Component.ts

filter_none

edit
close

play_arrow

link
brightness_4
code

import { Component, OnInit } from '@angular/core';
  
@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
  
export class DemoComponent implements OnInit {
  
  constructor() {
  }
  ngOnInit() {
  }
  //function to return list of numbers from 0 to n-1
  numSequence(n: number): Array<number> {
    return Array(n);
  }
}

chevron_right


Demo.Component.html

filter_none

edit
close

play_arrow

link
brightness_4
code

<mat-card class="example-card" >
  <mat-card-header>
   <h2 >Sequence of Numbers from 0 to 5</h2  >
  </mat-card-header>
  <mat-card-content>
     <!-- n traverses through a list of [0, 1, 2, 3, 4, 5] i.e 0 to 5
           i stores the index in each iteration -->
    <span *ngFor="let n of numSequence(6);
           let i = index;">{{i}} </span>
  </mat-card-content>
</mat-card>

chevron_right


Output:



Example 2:
Inserting template in typescript file and repeating the same element 6 times.
Demo2.component.ts

filter_none

edit
close

play_arrow

link
brightness_4
code

import { Component, OnInit } from '@angular/core';
  
@Component({
  selector: 'app-demo',
  //template encapsulated within the component ts file
  // instead of separate template(html)
  template: '
  <mat-card class="example-card" >
  <mat-card-header class="example-header">
   <h2 >Repeated GeeksforGeeks</h2  >
  </mat-card-header>
  <mat-card-content>
    <ul>
      <!--n traverses through a list of [0, 1, 2, 3, 4, 5] i.e 0 to 5
             prints GeeksforGeeks for 6 times --> 
     <li example-card-text 
         *ngFor="let n of numSequence(6)">
                <b>GeeksforGeeks</b></li>
    </ul>
  </mat-card-content>
</mat-card>
',
  styleUrls: ['./demo.component.css']
})
  
export class DemoComponent implements OnInit {
  constructor() {
  }
  
  ngOnInit() {
  }
   
  //function to return list of numbers from 0 to n-1
  numSequence(n: number): Array<number> {
    return Array(n);
  }
}

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Information Science Engineer Knowledgeable in wide range of development languages and methodologies Bright critical thinker with proven talent for learning quickly in results oriented environment Excellent verbal, written and communication skills Always Looking to learn new Things

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.