George Edwards George Edwards - 4 months ago 12
HTML Question

Vanilla NG2 component not displaying?

So in my angular 2 app I have:

//app.component.ts
import { Component } from '@angular/core';
import { sidebarComponent } from './sidebar/sidebar.component';

@Component({
selector: 'my-app',
template: `<sidebar></sidebar>
<h1>helps</h1>`,
providers: [sidebarComponent]
})
export class AppComponent { }


and

//sidebar.component.ts
import { Component } from '@angular/core';

@Component({
selector: 'sidebar',
template: `<h1>sidebar</h1>`
})
export class sidebarComponent { }


When I load my app and app.component is displayed, I get
<sidebar></sidebar><h1>helps</h1>
rendered directly (in the page source), but no
<h1>sidebar</h1>
. What have I missed here?

Answer

What have I missed here? Directives :-)

import { Component } from '@angular/core';
import { sidebarComponent } from './sidebar/sidebar.component';

@Component({
  selector: 'my-app',
  template: `<sidebar></sidebar>
  <h1>helps</h1>`,
  directives: [sidebarComponent]
})
export class AppComponent { }