Steal this elegant trick right now to repeat templates without *ngFor

Nivrith
Evergreen Engineer
Published in
1 min readJun 18, 2022
Photo by Rhett Wesley on Unsplash

The *ngFor directive is great when repeating templates for iterables. But when it comes to simply repeating templates based on a number, you have to hack your way around it.

Wouldn’t it be cool to be able to do something like this?

Well, we can 🎉

Let’s write a structural directive to make the magic happen:

This neat little directive supports 2 micro syntaxes for you to choose as per your liking.

It is also available for you to use on npm ngx-repeat-times

You can check out its usage in this StackBlitz below

Feel free to reach out and let me know how it works for you ;)

Happy Engineering!

If you’d like to be updated about more articles like this, subscribe to my free newsletter.

--

--

Nivrith
Evergreen Engineer

Software Engineer living a polymath lifestyle in Adelaide, Australia