Component not rendering Angular 2 Typescript

Question

I'm trying to learn Angular 2, after a lot of error messages i finally got the routes working and i can display the component i want. Now i want to show my homepage component, and i want this component to have a navbar component in it.

Home.ts:

import {Component, View} from 'angular2/core';
import {Navbar} from './navbar/navbar'

@Component({
  selector: 'home'
})

@View({
  templateUrl: '/app/home/home.html'
})

export class Home {

    constructor:(public navbar: Navbar) {
    }

}

home.html:

<p>NICE!</p>
<navbar></navbar>

navbar.ts:

import {Component, View} from 'angular2/core';

@Component({
  selector: 'navbar'
})

@View({
  template: `
  <ul>
    <li>This is the navbar</li>
  </ul>
  `
})

export class Navbar{
}

The homepage is displaying, but the tag just stays <navbar></navbar> when i inspect it. What am i doing wrong?

Danny Bullis · Accepted Answer · 2017-08-10 06:18:24Z

11

If you want the navbar component, you need to add it in the directives attribute of the parent component, not in its constructor, like so:

@Component({
  selector: 'home',
  templateUrl: '/app/home/home.html',
  directives: [ Navbar ]
})
export class Home {
  constructor() {

  }
}

edited Aug 10, 2017 at 6:18

Danny Bullis

3,2152 gold badges32 silver badges36 bronze badges

answered Feb 22, 2016 at 19:33

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David Ericsson Over a year ago

Thanks! This is indeed the answer for this question, but i'm afraid this throws me into the next error :(. Now my router is giving troubles again.

David Ericsson Over a year ago

It seems my navbar didn't compile, compiled it again and works like a charm now! Thanks!

Collectives™ on Stack Overflow

Component not rendering Angular 2 Typescript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related