Angular 2-RC4 Dynamic Content Loading

Question

Currently, I'm trying incorporating Leaflet into Angular 2-RC4. I have faced with the following problem of dynamically loading html into popupContent of leaflet markers.

In the parent class I have the following code:

export class BeaconLayerComponent implements OnInit {
    constructor(private resolver: ComponentResolver, private viewRef: ViewContainerRef) {}

    createMultipleDynamicInstance(markers) {
        markers.foreach((marker) => {
            createDynamicInstance(marker);
        }
    }

    createDynamicInstance() {
        this.resolver.resolveComponent(BeaconPopupComponent).then((factory:ComponentFactory<BeaconPopupComponent>) => {
        let popupComponentRef: ComponentRef<BeaconPopupComponent>;
        popupComponentRef = this.viewRef.createComponent(factory);
        popupComponentRef.instance.name = beaconJSON.name;

        popupComponentRef.instance.afterViewCheckedEventEmitter.subscribe((popupInnerHTML: string) => {
            //make use of the innerHTML
            // ... <= Create the leaflet marker with innerHTML as popupContent
            //After retrieving the HTML, destroy the element
            popupComponentRef.destroy();
        })
    });

Child component:

import {Component, AfterContentInit, EventEmitter, AfterViewInit, AfterViewChecked, ElementRef} from "@angular/core";


@Component({
    selector: 'beaconPopup',
    template: `
    <div>{{name}}</div>
    `
})

export class BeaconPopupComponent implements AfterViewChecked  {

constructor(private elementRef: ElementRef) {}

name:string;
public afterViewCheckedEventEmitter = new EventEmitter();

ngAfterViewChecked() {
        console.log("ngAfterViewChecked()");
        this.afterViewCheckedEventEmitter.emit(this.elementRef.nativeElement.innerHTML);
    }

}

When I run the html I get these errors:

2016-07-19 00:02:29.375 platform-browser.umd.js:1900 Error: Expression has changed after it was checked. Previous value: '[object Object]'. Current value: 'Happening Beacon'
at ExpressionChangedAfterItHasBeenCheckedException.BaseException [as constructor]

I'm trying to avoid getting the DOM element via JQuery

getDynamicElement(name)
{
    str = "<div><div>" + name + "<div></div>"
    return $(str).get[0]
}

Is there a better way to do it in Angular 2?

Use Async pipe with observables or promise http://stackoverflow.com/questions/34364880/expression-has-changed-after-it-was-checked — adityap, Jul 22 '16 at 17:00

Long Field · Answer 1 · 2016-09-01T04:37:19.693

These are two tricks inside your code, 1 dynamical load, 2 how to use jQuery($)

Here is how I create dynamica component from string

compileToComponent(template1: string): Promise<ComponentFactory<any>> {
   const metadata = new ComponentMetadata({
                      template: template1,
                      directives: ROUTER_DIRECTIVES
                    });
   let decoratedCmp = Component(metadata)(class DynamicComponent { });
   return this.resolver.resolveComponent(decoratedCmp);

}

For more details check here https://github.com/Longfld/DynamicRouter_rc4/blob/master/app/MyRouterLink.ts

or demo here http://plnkr.co/edit/diZgQ8wttafb4xE6ZUFv?p=preview

For rc5 see here :http://plnkr.co/edit/nm5m7N?p=preview

Angular 2-RC4 Dynamic Content Loading

1 Answers1