0

I am working in angular 6 and I got stuck at one point.

I have a requirement to load components with loop.I have 5 components with selector testcomponent1, testcomponent2 etc. I want to loop through array and create component selector with each array element.

TypeScript

@Component({
   selector: 'testcomponent, [testcomponent]',
   templateUrl: './testcomponent.component.html',
   styleUrls: ['./testcomponent.component.scss'],
   encapsulation: ViewEncapsulation.None,
})
export class testcomponentComponent implements OnInit {
   componentArray : any = ['testcomponent1', 'testcomponent2', 'testcomponent3', 'testcomponent4', 'testcomponent5'];
}

HTML

<ng-container *ngFor="let component of componentArray">
  <span {{component}}></span>
</ng-container>

        OR

<ng-container *ngFor="let component of componentArray">
  <{{component}}></{{component}}>
</ng-container>

Any kind of help is appreciable.

Lakhvir Singh
  • 664
  • 4
  • 15
  • 35
  • Worthy article on same https://www.infragistics.com/community/blogs/b/infragistics/posts/how-to-load-component-dynamically-in-angular – Pardeep Jain Dec 26 '18 at 07:34
  • Please Try this :- [Dynamic add component](https://stackblitz.com/edit/angular-ygz3jg?file=app%2Fdcl-wrapper.component.ts) Hope so its works. – Harleen Kaur Arora Dec 26 '18 at 09:16

0 Answers0