How to load custom components dynamically to div? Angular2

Question

ANGULAR2, I want to load all my custom component into a html div based on customComponentsList.

My actual scenario is considor i have

A(0-row,0-column),B(0,1),C(0,2),D(1,0),E(1,1),F(2,0), G(2,1), H(2-row,2-column))

custom components.

I have to display in div as per row and column positions like

    A B C
    D E
    F G H

Sounds like http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 — Günter Zöchbauer, Oct 20 '16 at 09:15
Does this have anything to do with Angular 2? Sounds rather like pure CSS issues. — Hubert Grzeskowiak, Oct 20 '16 at 09:17
thank you @GünterZöchbauer, really helpful and i have one doubt ,how can i load components with row,column positioin in dom — Dileep Kumar Kottakota, Oct 20 '16 at 10:04

score 0 · Accepted Answer · answered Oct 20 '16 at 10:12

0

This might work

<div #target x="0" y="0"></div>
<div #target x="1" y="0"></div>
<div #target x="2" y="0"></div>

<div #target x="0" y="1"></div>
<div #target x="1" y="1"></div>
<div #target x="2" y="1"></div>

<div #target x="0" y="2"></div>
<div #target x="1" y="2"></div>
<div #target x="2" y="2"></div>

@ViewChildren('target', {read: ViewContainerRef}) targets: QueryList<ViewContainerRef>;

// this.targets is not filled before `ngAfterViewInit()` was called
addComponent(x, y) {
  let t = this.targets(y * 3 + x); 
}

answered Oct 20 '16 at 10:12

Günter Zöchbauer

623,577
216
2,003
1,567

I did it using your answer 'http://stackoverflow.com/questions/37656742/how-to-use-ngfor-to-display-the-data-as-matrix'. – Dileep Kumar Kottakota Oct 20 '16 at 11:20
– Dileep Kumar Kottakota Oct 20 '16 at 11:21

How to load custom components dynamically to div? Angular2

1 Answers1