Angular2 under templates?

Question

Is there a way to have multiple templates or helper templates for a specific component in angular2?

typescript file →

@Component({
    selector: 'portal',
    templateUrl: 'main.html'
})

export class AppComponent{}

main.html →

<div>
<div>bla bla bla </div>
   -- load sub html page ??????
<div>

Answer 1

I would use a component for this, since Angular2 provides a component approach:

<div>
<div>bla bla bla </div>
   <someOtherComponent></someOtherComponent>
<div>

with the following code:

@Component({
  selector: 'someOtherComponent',
  templateUrl: 'other.html'
})
export class SomeOtherComponent{}

Answer 2

This is not currently supported, but it is ultimately planned to add support. The initial approach using the decorator @View()was discarded (see also https://github.com/angular/angular/issues/7363 ).

You can use ngSwitchor ngIfto switch between different parts of the same template.

>=RC.2

template: `
    <div [ngSwitch]="value">
      <div *ngSwitchCase="phone">
        phone content here
      </div>
      <div *ngSwitchCase="tablet">
        table content here
      <div *ngSwitchDefault>
        brower content here
      </div>
    </div>
`

<=RC.1

template: `
    <div [ngSwitch]="value">
      <div *ngSwitchWhen="phone">
        phone content here
      </div>
      <div *ngSwitchWhen="tablet">
        table content here
      <div *ngSwitchDefault>
        brower content here
      </div>
    </div>
`