CODEWITHSUNDEEP
angular
Mike Anderson
Mike Anderson

Reputation: 768

Angular 2 work on with html tags that are in app template?

I dont have a SPA. I have a html page (index.html) that want to host some angular2 component or may by directive to work with html tags in index.html. The index.html is just for initialing th angular2 app?! Please look at this http://plnkr.co/edit/TpsBwe?p=preview for clarify what i want to do. In Angular 1 i can attach the angular controllers to any tags in the index.html and use the scope of the controller within the tag. Thank a lot for any advises.

Upvotes: 1

Views: 773

Answers (2)

Michael Oryl
Michael Oryl

Reputation: 21662

No, you can't do this. Everything you want Angular to touch will need to be inside the main application tag.

But you can nest things well, so this would be possible:

import {Component} from "angular2/core";

@Component({
    selector: 'sub-page',
    directives: [Navbar],
    pipes: [],
    providers: [],
    template: `
<br>
<br>
<div><button (click) = "onSave()">I'm back in the app</button></div>
`
})
export class SubPage {
    constructor() {}

    subPage() {
        alert("I'm here");
    }
}

Then you would add it to your main component:

//our root app component
import {Component} from 'angular2/core'
import {MyClickDirective,MyClickDirective2,SubPage} from './mydirectives'

// Alerter fn: monkey patch during test
export function alerter(msg?: string) {
    window.alert(msg);
}
@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
     <button (click) = "onSave()">Save.Work</button>
    </div>
    <sub-page></subpage>
  `,
  directives: [MyClickDirective,MyClickDirective2,SubPage]
})
export class App {
    alert = alerter;
  constructor() {
    this.name = 'Angular2'
  }
    onSave(event: KeyboardEvent) {
        let evtMsg = event ? ' Event target is ' + (<HTMLElement>event.target).innerText : '';
        this.alert('Saved.' + evtMsg)
    }
}

Note that I'm including the newly defined SubPage class in directives and using the <sub-page></sub-page> tag in the template.

That would give you the same layout, just by nesting components.

Upvotes: 0

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658017

In Angular2 everything has to be within a root component. You can use <ng-content></ng-content> in the template of your root component to transclude child elements of your root component, but as far as I know this is limited on the root component.

Upvotes: 1

Related Questions