Dymanic templateUrl as view handler

Question

I've recently started picking up angular2 and I'm developing a simple navegation web app. I want to press an option in a nav-menu and a div will update with a diferent html file as the user chooses.

I'm having trouble with the last part.

This is my page layout:

+-----------------------------------------------------------+
|                     header                                |
+-----------------+-----------------------------------------+
|                 |                                         |
|                 |         my-content-area                 |
|    menu         |                                         |
|                 |                                         |
|                 |                                         |
+-----------------+-----------------------------------------+
|                    footer                                 |
+-----------------------------------------------------------+

I've got the click event updating correctly, however I'm having touble with the templateUrl, as I can't get it to be dyanmic and the answers I keep finding are very complicated to the simple design I have (I want to keep this as simple as possible).

This is my nav-details.component.ts:

import { Component, Input } from '@angular/core';
import { NavOption } from './nav.option';

@Component({
  moduleId: module.id,
  selector: 'my-content-area',
  templateUrl: '{{ navoption.view_name }}'
})

export class NavDetailComponent {
  @Input()
  navoption: NavOption;
}

This does not work, as I get a 404 error saying that the file {{ navoption.view_name }} can't be found instead of the value of the variable with the path name.

possibly duplicate of http://stackoverflow.com/questions/31692416/dynamic-template-urls-in-angular-2 — Akshay Khale, Nov 11 '16 at 13:58

score 2 · Accepted Answer · answered Nov 11 '16 at 13:57

You are on the wrong approach. To change your content view it's best to use Component Routing. The metadata in the @Componentdecorator isn't dynamic.

So you can't change the template of your DetailComponent but you can change the Component itself.

So you would have 2 different Components then which contain your 2 different templates.

Your app.component.html should similar to this.

<your-header-component>Header</your-header-component>
<your-menu-component>Menu</your-menu-component>

<router-outlet></router-outlet> // in the router-outlet directive your active component will be placed.

<your-footer-component></your-footer-component>

Then you have your app.module.ts which contains your Routes too.

import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {BrowserModule} from '@angular/platform-browser';

import {AppComponent} from './app.component';

@NgModule({
    declarations: [
        AppComponent,
        YourHeaderComponent,
        YourMenuComponent,
        YourFooterComponent,
        FooComponent,
        BarComponent
    ],
    imports: [
        BrowserModule,
        RouterModule.forRoot(
            {
                path: '',
                component: FooComponent
            },
            {
                path: 'bar',
                component: BarComponent
            }
        ])
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

The FooComponent and the BarComponent are placeholders for your components which you will have in your content area. If the browserroute matches the bar path then the BarComponent will be placed in the router-outlet directive otherwise angular will place the FooComponent there.

To change the route via link you have to add the routerLinkdirective to an a-tag.

In your your-menu-component.component.html

<nav>
    <a [routerLink]=''>Foo</a>
    <a [routerLink]='/bar'>Bar</a>
</nav>

To read more about angular 2 routing read this

I am actually following the tutorial on that exact page. I just didn't want to use routing, because I didn't understand that the `@Component` couldn't be dynamic. Thanks for clearing it up. — Comum, Nov 11 '16 at 14:08

Dymanic templateUrl as view handler

1 Answers1