Angular ngOnInit() - loop into a file HTML - html

Question

I would like to display the values following -> 0 1 2 without using an array.
export class AppComponent {
ngOnInit() {
for (let i = 0; i < 3; i++) {
console.log('Number ' + i);
}
}
}
Into the file HTML what should I put to retrieve my values?
Here is my code here Stackblitz
Thank you for your help.

Answer 1

Html is bound with some values from the .ts file which are declared on class level as fields
export class AppComponent {
field1: any
....
Local variables like the ones that you use in a for loop are not bound in the html file and can't be used there.
Html is bound and has access to either public class field variables or public methods. You could make a public method to return something from a for loop and then the html could invoke that public method and render the return value.
example
public method1(): string {
let text = '';
for (let i = 0; i < 3; i++) {
if (text === ''){
text = text + i;
} else {
text = text + ' ' + i;
}
}
return text;
}
and then on .html file you can do
<div> {{method1()}} </div>
But the method ngOnInit() that you use is a method which is invoked automatically by angular in the angular lifecycle so shouldn't be used to achieve that.

Answer 2

I built a pipe that generates a sequence of consecutive numbers (starting with 0) that you can use directly inside of the template, not even needing the for in the ngOnInit method.
#Pipe({
name: 'sequenceGenerator'
})
export class SequenceGenerator implements PipeTransform {
transform(numberOfItems?: number): number[] {
const length = numberOfItems ?? 0;
const sequence = Array.from({ length: length }, (_, i) => i);
return sequence;
}
}
And you can use it like this:
<div *ngFor="let item of (3 | sequenceGenerator)">
{{item}}
</div>
Have a look at the stackblitz example for further reference.