0

we're trying to build a nice Angular 2 app here.

We want to load a few components based on what we get back from a web service call.

You get json back from the web service call in our base component.

The json may look like this:

[{
        "textChunk": {
            "text": "Lorem ipsum dolor sit amet"
        }
    }, {
        "factsBox": {
            "heading": "Sample heading",
            "body": "<p>Lorem ipsum sample</p><p>More sample rows</p>"
        }
    }, {
        "chart": {
            "type": "circle",
            "data": [30, 10, 50, 10]
        }
    }]

So, we get "textChunk", "factsBox", "chart" back and their respective data.

Now in our base component's ngOnInit method, we want to somehow load/inject:

  • textChunk component
  • factsBox component
  • chart component

with their respective templates (preferably html files or ASP.NET MVC area views) and give them a model (stored in an object model in our base component).

Also, these items in the json array might appear multiple times at different positions - that's why we need to load them in the correct component on the fly.

I've been looking into deprecated DynamicContentLoader, I've been looking at this thorough SO answer on dynamically loading components and I've been looking at some other stuff. I try to understand the SO answer, but fail to do so.

Can you point me in the right direction with base examples on how I can dynamically load my components and their templates?

To give you slightly more insight, here's the our base component:

import { Component, Directive, Input, OnInit } from '@angular/core'
import { ApiService } from './api.service';
import { IApiItem } from './IApiItem';
import { KeysPipe } from './KeysPipe';

@Component({
    selector: 'sampleApi',
    templateUrl: 'app/templates/latest.html',
    providers: [ApiService]
})
export class ApiComponent implements OnInit {
    constructor(private apiService: ApiService) { } 
    model: IApiItem;

    ngOnInit() {
        this.get();
    }

    get() {
        this.apiService.getJson().subscribe(data => this.model = data);
    }
}

Thanks!

Community
  • 1
  • 1
Martin S Ek
  • 2,043
  • 2
  • 16
  • 22
  • 1
    I'm an Angular beginner, but couldn't you just set up your base component to render the json data in the template with the correct HTML markup? Then Angular would load the necessary components for you? – bassxzero Nov 11 '16 at 13:09
  • The thing is, we don't know the number of items in the json array and in what order they come - that's why we need to load this on demand. Same component might appear multiple times at different positions in the json array. I'll add it to the question. Thanks! – Martin S Ek Nov 11 '16 at 13:40
  • 1
    http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 – Günter Zöchbauer Nov 11 '16 at 13:59
  • 1
    You can use the `ngSwitch` directive, but you cannot load a given component on demand like you want. And if I am honest, the webservice you call does not make sense if you can't really predict what answer you get. I think that a response of a webservice should be completly predictable. – M4R1KU Nov 11 '16 at 14:03
  • Thanks for the ngSwitch tip! The json data response from the service is predictable, however it can contain 0-X number of different type of nodes we want to take and load in different components. That's why we can't have a set template but need a dynamic solution.. – Martin S Ek Nov 11 '16 at 14:07
  • Günter's link lead me on my way to solving this. Thanks a lot! If I find more helpful things during the development, I'll post them here. – Martin S Ek Nov 13 '16 at 20:19

0 Answers0