CODEWITHSUNDEEP
javascriptjsonangular
Bhushan Gadekar
Bhushan Gadekar

Reputation: 13805

How to use angular2 retrieved data as html tag?

I am reading a json file in angular2. so far I am able to get the data from json file.I have created few angular2 components in project who has selectors in this data. I want to load all my components using this data as html tag. i.e. If I am getting col.uiComponent="HEADING",then I want to use this as

<HEADING></HEADING>

so,I need to do this as

<col.uiComponent> Loading.. </col.uiComponent>

I tried using this code:

<div *ngFor="#srColumn of sRow.secRowColumns">                        
   <{{srColumn.uiComponent}}>Loading </{{srColumn.uiComponent}}>                       
</div>

Child Component

@Component({
selector: 'DYNAMIC-BODY-1',    
templateUrl: 'app/DYNAMIC-BODY-1/DYNAMIC-BODY-1.component.html'   
})

DYNAMIC-BODY-1.component.html

<div class="col-sm-4 divDynamic">
    <table  style="width:100%;">
        <tr style="background-color:#B8B8B8">
            <th>{{comp.data}}</th>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
    </table>
    <br/>
</div>

using DynamicComponentLoader I did this.

constructor(dcl: DynamicComponentLoader, injector: Injector,private dataService: DataService) {
    dcl.loadAsRoot(DynamicBody1Component, 'DYNAMIC-BODY-1', injector);
 }

my child component has selector "DYNAMIC-BODY-1" Its Showing me error like:

EXCEPTION: The selector "DYNAMIC-BODY-1" did not match any elements

Plz Help.

Upvotes: 3

Views: 143

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658087

This doesn't work. You can't add components/directives dynamically with dynamic binding.

Angular has DynamicComponentLoader for this to add components imperatively

See also https://stackoverflow.com/search?q=%5Bangular2%5D+dynamiccomponentloader

Upvotes: 1

Related Questions