How to use variable to define templateUrl in Angular2

by

I think you should use dynamic component loading to do that.

Let’s say we have a json file:

{
    "title": "My first article",
    "html": "app/articles/first.html"
}

We might create HtmlOutlet directive that will create component dynamicallу with desired templateUrl:

@Directive({
  selector: 'html-outlet' 
})
export class HtmlOutlet {
  @Input() html: string;

  constructor(private vcRef: ViewContainerRef, private compiler: Compiler) {}

  ngOnChanges() {
    const html = this.html;
    if (!html) return;

    @Component({
      selector: 'dynamic-comp',
      templateUrl: html
    })
    class DynamicHtmlComponent  { };

    @NgModule({
      imports: [CommonModule],
      declarations: [DynamicHtmlComponent]
    })
    class DynamicHtmlModule {}

    this.compiler.compileModuleAndAllComponentsAsync(DynamicHtmlModule)
      .then(factory => {
        const compFactory = factory.componentFactories
               .find(x => x.componentType === DynamicHtmlComponent);
        const cmpRef = this.vcRef.createComponent(compFactory, 0);
        cmpRef.instance.prop = 'test';
        cmpRef.instance.outputChange.subscribe(()=>...);;
    });
  }
}

And then use it like:

<html-outlet [html]="article?.html">

Where html is path to article html

See more details in this Plunkr

More Related Contents:

  1. How can I select an element in a component template?
  2. How do I share data between components in Angular 2?
  3. Error when trying to inject a service into an angular component “EXCEPTION: Can’t resolve all parameters for component”, why?
  4. angular 2 sort and filter
  5. Ionic 2 Form goes up when keyboard shows
  6. Angular2 – FormControl Validation on blur
  7. When to use square brackets [ ] in directives @Inputs and when not?
  8. Angular2 – Interaction between components using a service
  9. Reactive forms – disabled attribute
  10. How to implement sleep function in TypeScript?
  11. Testing error case with observables in services
  12. Multiple canActivate guards all run when first fails
  13. Build Angular2 HTML and TypeScript to a single file
  14. angular keyvalue pipe sort properties / iterate in order
  15. Angular subscribe elegant
  16. How to allow access outside localhost
  17. Angular – Make multiple HTTP calls sequentially
  18. @types/googlemaps/index.d.ts’ is not a module
  19. Pass parameter into route guard
  20. Typescript dependency injection public vs private
  21. Rxjs Retry with Delay function
  22. What is the meaning of question mark in expressions in Angular 2?
  23. Merging http observables using forkjoin
  24. Angular: selected on option of select doesn’t work as excepted while using along with ngModel
  25. What is pipe for in RxJS?
  26. How to throw error from RxJS map operator (angular)
  27. Filtering different columns in a material table
  28. Angular 2 disable sanitize
  29. Can I use Angular i18n to translate string literals in typescript code
  30. How to generate components in a specific folder with Angular CLI?

Leave a Comment