typescript - Angular 2/4 component with dynamic template or templateUrl -


i have been trying find solution everywhere.

i have project different 'skins', different sets of templates/css.

i trying have components use skin based on variable theme_dir.

unfortunately, cannot find how make happens. looked dynamic component loader on angular.io without success.

i looked @ few answers here without success either.

does have idea?

this tried far:

import { componentfactoryresolver, viewcontainerref } '@angular/core';  // @component({ //     templateurl: '../../assets/theme/'+theme_dir+'/login.template.html', // })  export class logincomponent implements, afterviewinit {       private log = log.create('loginpage');      constructor(private mzkslsrequestservice: mzklsrequestservice,                 private componentfactoryresolver: componentfactoryresolver,                 public viewcontainerref: viewcontainerref) {     }        ngafterviewinit() {         let componentfactory = this.componentfactoryresolver.resolvecomponentfactory(new component({             templateurl: '../../assets/theme/default/login.template.html',         }));         let viewcontainerref = this.viewcontainerref;         viewcontainerref.clear();         let componentref = viewcontainerref.createcomponent(componentfactory);      }  }

you can this:

import {   compiler, component, injector, version, viewchild, ngmodule, ngmoduleref,   viewcontainerref } '@angular/core';   @component({   selector: 'my-app',   template: `       <h1>hello {{name}}</h1>       <ng-container #vc></ng-container>   ` }) export class appcomponent {   @viewchild('vc', {read: viewcontainerref}) vc;   name = `angular! v${version.full}`;    constructor(private _compiler: compiler,               private _injector: injector,               private _m: ngmoduleref<any>) {   }    ngafterviewinit() {     const tmpcmp = component({         moduleid: module.id, templateurl: './e.component.html'})(class {     });     const tmpmodule = ngmodule({declarations: [tmpcmp]})(class {     });      this._compiler.compilemoduleandallcomponentsasync(tmpmodule)       .then((factories) => {         const f = factories.componentfactories[0];         const cmpref = f.create(this._injector, [], null, this._m);         cmpref.instance.name = 'dynamic';         this.vc.insert(cmpref.hostview);       })   } }

just make sure url correct , template loaded client.

read here need know dynamic components in angular more details.


Comments

Post a Comment

Popular posts from this blog

javascript - Create a stacked percentage column -

i have collection of data : var data = [ {"p301a":"10","p301b":"7","p301c":"7","p301d":"3","p301e":"8","p301f":"8","p301g":"8","p301h":"8","p301i":"8","p301j":"8","p301k":"8","p301l":"8","p301m":"8","p301n":"8","p301o":"8","age":"31-40 years","profesion":"2","position":"2"}, {"p301a":"5","p301b":"4","p301c":"4","p301d":"4","p301e":"4","p301f":"4","p301g":"4","p301h":"4","p301i":"4","p301j":"4","p301k":"4...
Read more

Optimising Firebase database by automatically overwriting data -

in firebase app have following structure: posts latest all users can write posts > latest . want limit entries 20 posts save space in database. , posts beyond 20 unnecessary never shown on homepage. how can limit posts 20, when user writes posts > latest posts @ end drop off (be deleted) automatically? this sample should you. you need : const max_log_count = 20; exports.removeold = functions.database.ref('/posts/latest/{postid}').oncreate(event => { const parentref = event.data.ref.parent; return parentref.once('value').then(snapshot => { if (snapshot.numchildren() >= max_log_count) { let childcount = 0; const updates = {}; snapshot.foreach(function(child) { if (++childcount <= snapshot.numchildren() - max_log_count) { updates[child.key] = null; } }); // update parent. removes children. ...
Read more

javascript - Angular UI-Grid customTemplate directive causing rows to load slowly/? -

Image
each grid cell can have more 1 customtemplate loaded. have directive holds watcher on model_col_field listen cell updates on scroll when dom rows updated , recompile celltemplate . without watcher , $compile rows repeat on scroll, showing same set of rows. is there more angular way of approaching or way improve performance? relevant controller code: create gridoptions.data & gridoptions.columndefs : var customtemp = '<div ng-repeat="opt in grid.appscope.colvalueoptionsmodel" ng-init="tempstring=model_col_field.clazz+opt.key;"><comparison-directive dbo="model_col_field" attobj="opt" fff="grid.appscope.getattributetemplate(tempstring)" /></div>'; $scope.gridoptions.columndefs = [ { name:'yindex',pinnedleft:true,celltemplate: customtemp, displayname:'index'}, { name:'col1',celltemplate: customtemp}, { name:'col2',celltemplate: c...
Read more