Angular 2 stable: templateUrl variable

Question

I am fairly new to AngularJS (using 2 stable). I have an existing PHP/Codeigniter3 app and my job is to make an SPA. I am running into a problem where I can't access router params at all to add them in a templateUrl.

For example:

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';

@Component({
  selector: 'apps_container',
   // template: `You just accessed app: {{app_name}}` // This binding works obviously.
  templateUrl: (() => {
    // return 'app/' + this.route.params['app_name'] // Will never work no matter what because I have no access to route
    return 'app/:app_name'; // Treated as a string.
  })()
})

export class AppViewComponent {
  app_name: any;

  constructor(
    private route: ActivatedRoute,
    private router: Router

  ) {}

  ngOnInit() {
    this.route.params.forEach((params: Params) => {
        this.app_name = params['app_name'];
    });
  }
}

@micronyks if I do as you suggested, I get "error TS2304: Cannot find name 'app_name'." from the compiler. If I use "return "app/'" + this.app_name +"'";" I get an undefined variable and that makes sense because the constructor didn't even init. — Sherief Alaa, Sep 30 '16 at 08:09
try adding 'private app_name' in the export class AppViewComponent — Pritish Vaidya, Oct 02 '16 at 21:22
@pritishvaidya changing app_name to private won't affect anything, still undefined. — Sherief Alaa, Oct 02 '16 at 22:00

yurzui · Accepted Answer · 2016-10-13T18:02:30.723

That being said, you could to do that via dynamic component loading.

In angular2 final it might look like this:

@Component({
  selector: 'app-container',
  template: '<template #vcRef></template>'
})

export class AppContainerComponent {
  @ViewChild('vcRef', { read: ViewContainerRef }) vcRef: ViewContainerRef;
  constructor(
    private route: ActivatedRoute,
    private cmpFactoryResolver: ComponentFactoryResolver,
    private compiler: Compiler
  ) { }

  ngOnInit() {
    this.route.params.forEach((params: Params) => {
      this.loadDynamicComponent(params['app_name']);
    });
  }

  loadDynamicComponent(appName) {
    this.vcRef.clear();

    @Component({
      selector: 'dynamic-comp',
      templateUrl: `src/templates/${appName}.html`
    })
    class DynamicComponent { };

    @NgModule({
      imports: [CommonModule],
      declarations: [DynamicComponent]
    })
    class DynamicModule { }
    this.compiler.compileModuleAndAllComponentsAsync(DynamicModule)
      .then(factory => {
        const compFactory = factory.componentFactories
          .find(x => x.componentType === DynamicComponent);
        const cmpRef = this.vcRef.createComponent(compFactory);
        cmpRef.instance.prop = 'test';
        cmpRef.instance.outputChange.subscribe(()=>...);;
      });
  }
}

Plunker Example

I guess there are other ways to do that like ngSwitch or ngTemplateOutlet

score 0 · Answer 2 · edited May 23 '17 at 11:54

0

Severals interresting answers related to your question can be found here : Dynamic template in templatURL in angular2

edited May 23 '17 at 11:54

Community

1
1

answered Oct 02 '16 at 20:58

laurent bourdeau

51
4

I am aware of this answer, the problem in it that it's obsolete. – Sherief Alaa Oct 02 '16 at 22:03

score 0 · Answer 3 · answered Oct 03 '16 at 21:28

templateUrl callback will be executed before creating component, in other words before route injection, so there are two ways to do what you want:

Use window.location to get current url and manually parse parameters.
Add router listener to detect RoutesRecognized event and use its state:RouterStateSnapshot property to find parameters and save it to static variable to use in template callback.

score 0 · Answer 4 · answered Oct 12 '16 at 21:08

0

yurzui - does the dynamically added component gets all the binding in the parent component - AppContainerComponent in your example?

answered Oct 12 '16 at 21:08

user1143933

21
2

Angular 2 stable: templateUrl variable

4 Answers4

Linked