How to repeat HTML element multiple times using ngFor based on a number? Last Updated : 24 Jun, 2020 Comments Improve Suggest changes Like Article Like Report 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 javascript 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); } } Demo.Component.html html <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> Output: Example 2: Inserting template in typescript file and repeating the same element 6 times. Demo2.component.ts javascript 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); } } Output: Comment More infoAdvertise with us Next Article How to convert string into a number using AngularJS ? V vishnuudai Follow Improve Article Tags : AngularJS AngularJS-Misc Similar Reads How to limit ngFor repeat to some number of items in Angular ? In AngularJS, we can use the ngFor directive to loop over a list of items and display them on a webpage. Although, there could be some cases where we don't want to use all the elements in the list but want to display only a limited number of initial items, or the paginated items from the list. In th 3 min read How to fetch the details using ng-repeat in AngularJS ? In this article, we will see how to fetch the details with the help of the ng-repeat directive in Angular, along with understanding its implementation through the illustrations. AngularJS contains various types of pre-defined Directives, where most of the directives start with ng which denotes Angul 2 min read How to convert string into a number using AngularJS ? In this article, we will see how to convert a string into a number in AngularJS, along with understanding its implementation through the illustrations. Approach: The parseInt() method is used for converting the string to an integer. We will check whether the string is an integer or not by the isNumb 2 min read How to Add Dynamic Options for Multiple Selects Inside ng-repeat Directive ? Given an HTML document containing some options element and the task is to add an array of javascript objects dynamically with multiple selects using ng-repeat in angularJS. Approach: The task is done using ng-repeat which loops through an array. Let's call this array "models". Each select menu prese 3 min read How to filter ng-repeat values according to ng-model using AngularJS ? In this article, we will see how to filter the value of the ng-repeat directive according to the ng-model directive using AngularJS. The ng-repeat values can be filtered according to the ng-model in AngularJS by using the value of the input field as an expression in a filter. We can set the ng-model 2 min read How to check an element with ng-if is visible on DOM ? ng-if directive: The ng-if directive in AngularJS is used to remove or recreate a portion of the HTML element based on an expression. If the expression inside it is false then the element is removed and if it is true then the element is added to the DOM.Syntax:<element ng-if="expression"> Cont 2 min read Like