material and flex layout atrributes doesn't work by loading dynamically and works as simple HTML

Question

I create app using typescript. Now I am in trouble. Template loaded using API from server doesn't work as it was working when it was loaded as part of website on page load. I still can not get whether it is problem because of it is not compiled or because of security reasons. I tried this example, but it still doesn't work. Here is how I applied the later to my app:

Short description: router calls PageComponentLoader which calls AppService which calls PageComponent (didn't included as it works well, so supposed there are no problems). The later calls API and inserts (sanitizes too) the answer to template.

Problem: buttons render as it were <button>, but not <button md-button>MATERIAL</button>. divs render as it weren't flex'ed too.

app.module.ts

@NgModule({
    imports: [
    BrowserModule, FormsModule, HttpModule,
    MaterialModule,
    RouterModule.forRoot([
        { path: 'Page/:param', component: PageComponentLoader },
),

declarations: [AppComponent, DclWrapper, PageComponent, PageComponentLoader],
entryComponents: [PageComponent,PageComponentLoader],
    bootstrap: [AppComponent]

dynamic.componets.loader.ts (taken from example from the link)

// Helper component to add dynamic components

import { Component, ViewChild, Input, ViewContainerRef, Type, ComponentRef, ComponentFactoryResolver, Compiler } from '@angular/core';    

@Component({
    selector: 'dcl-wrapper',
    template: `<div #target></div>`
    //  ,entryComponents: [PageComponent]
})
export class DclWrapper {
    @ViewChild('target', { read: ViewContainerRef }) target: ViewContainerRef;
    @Input() types: Type<Component>;
    cmpRef: ComponentRef<Component>;
    private isViewInitialized: boolean = false;

    constructor(private componentFactoryResolver: ComponentFactoryResolver, private compiler: Compiler) { }

    updateComponent() {
        if (!this.isViewInitialized) {
            return;
        }
        if (this.cmpRef) {
            // when the `type` input changes we destroy a previously 
            // created component before creating the new one
            this.cmpRef.destroy();
        }

        let factory = this.componentFactoryResolver.resolveComponentFactory(this.types);
        this.cmpRef = this.target.createComponent(factory)
        // to access the created instance use
        // this.compRef.instance.someProperty = 'someValue';
        // this.compRef.instance.someOutput.subscribe(val => doSomething());
    }

    ngOnChanges() {
        this.updateComponent();
    }

    ngAfterViewInit() {
        this.isViewInitialized = true;
        this.updateComponent();
    }

    ngOnDestroy() {
        if (this.cmpRef) {
            this.cmpRef.destroy();
        }
    }
}

app.service.ts

import {Injectable } from '@angular/core';    
@Injectable()
export class AppService {    
    component = {
        title: 'Example',
        type: PageComponent
    }    
    getComponent() {
        return this.component;
    }
}

Page.component.loader.ts

@Component({    
    template: '<dcl-wrapper [types]="component.type"></dcl-wrapper>',
    selector: 'Page',
    providers:[AppService]      
})

export class PageComponentLoader 
    component: {};    
    constructor(
        private _appService: AppService) {
    }    
    ngOnInit() {
        this.component = this._appService.getComponent();
    }    
}

page.html

<div fxLayout="column">
    <div [sanitizer]="myPage"></div>         
</div>

material and flex layout atrributes doesn't work by loading dynamically and works as simple HTML

0 Answers0