How to put a component inside another component in Angular2?

angular angular2-directives
Paolo Ardissone picture Paolo Ardissone · Apr 19, 2017 · Viewed 142.8k times · Source

I'm new at Angular and I'm still trying to understand it. I've followed the course on the Microsoft Virtual Academy and it was great, but I found a little discrepancy between what they said and how my code behave! Specifically, I've tried to "put a component inside another component" like this:

@Component({
    selector: 'parent',
    directives: [ChildComponent],
    template: `
            <h1>Parent Component</h1>
            <child></child>
        `
    })
    export class ParentComponent{}


@Component({
    selector: 'child',    
    template: `
            <h4>Child Component</h4>
        `
    })
    export class ChildComponent{}

This is the same example that they make on the course, but in my code doesn't work! In particular VisualStudio says to me that the 'directives' property doesn't exist in the component decorator. How can I solve this?

Answer

Royi Namir picture Royi Namir · Apr 19, 2017

You don't put a component in directives

You register it in @NgModule declarations:

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App , MyChildComponent ],
  bootstrap: [ App ]
})

and then You just put it in the Parent's Template HTML as : <my-child></my-child>

That's it.

Related questions

How to pass object from one component to another in Angular 2?

I have Angular components and first component uses the second one as a directive. They should share the same model object, which is initialized in the first component. How can I pass that model to the second component?

Read More
Angular 2 Scroll to top on Route Change

In my Angular 2 app when I scroll down a page and click the link at the bottom of the page, it does change the route and takes me the next page but it doesn't scroll to the top of the …

Read More
Exception: Can't bind to 'ngFor' since it isn't a known native property

What am I doing wrong? import {bootstrap, Component} from 'angular2/angular2' @Component({ selector: 'conf-talks', template: `<div *ngFor="talk of talks"> {{talk.title}} by {{talk.speaker}} <p>{{talk.description}} </div>` }) class ConfTalks { talks = [ {title: …

Read More