1

I'm attempting to create the following HTML element in my app.component.ts file:

 <a *ngFor="let ver of versionList">{{ver}}</a>

The issue I'm running into is adding the *ngFor to the element. I've tried using:

const a = this.renderer.createElement('a');
this.renderer.setProperty(a, '*ngFor', 'let ver of versionList');

and 

const a = this.renderer.createElement('a');
this.renderer.setAttribute(a, '*ngFor', 'let ver of versionList');

with no luck. I haven't been able to find any references for dynamically adding *ngFor in the documentation so I'm wondering if this is possible?

renderer is declared in constructor as: private renderer: Renderer2
Angular version: 8.2.2

  • Can check here https://stackoverflow.com/questions/41298168/how-to-dynamically-add-a-directive?noredirect=1&lq=1 – xdeepakv Oct 01 '19 at 17:57
  • All you need to do is to dynamically add elements to the array you are iterating over i.e. `versionList` – Nicholas K Oct 01 '19 at 18:01

1 Answers1

1

It is not possible as *ngFor should be compiled by Angular. But why do you need that? Usually it is enough to add it to HTML and set *ngIf="versionList && versionList.length > 0"

Alex Vovchuk
  • 2,828
  • 4
  • 19
  • 40
  • The goal is to have a single .html file (app.component.html) where I can add and remove html elements as they are needed instead of using `*ngIf` or hiding them. I've been working with angular for about 3 weeks so I apologize if this was a silly question. Thank you for the answer! –  Oct 01 '19 at 18:12
  • This would work. Note that you cannot have *ngFor and *ngIf on the same element, so you can wrap it in an \ – Farasi78 Oct 01 '19 at 18:13