How to put a component inside another component in Angular2?

Question

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?

Taw

Answer 1

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.

Loya

The Plnkr doesn't seem to exist anymore. – Bodyguard

@Royi Namir, can i somehow add the Template after a click inside the Parent e.g on a button? Without any routes? – Hartle

@Hartle I don't understand your question. – Loya

lets say i have a parent Component called parent with the selector <app-parent></app-parent>. The templateUrl just consist of <button></button> and the child Component selector: <app-child></app-child>. But i want the app-child to be loaded only after i click on the button. – Hartle

@Hartle You have 2 options : you can use *ngIf on the app-child or you can inject a new componenet vs ViewContainerref and then createComponenet – Loya

dont forget to add NgModule into your import from '@angular/core' – Jobbery

Answer 2

If you remove directives attribute it should work.

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


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

---

Directives are like components but they are used in attributes. They also have a declarator @Directive. You can read more about directives Structural Directives and Attribute Directives.

There are two other kinds of Angular directives, described extensively elsewhere: (1) components and (2) attribute directives.

A component manages a region of HTML in the manner of a native HTML element. Technically it's a directive with a template.

---

Also if you are open the glossary you can find that components are also directives.

Directives fall into one of the following categories:

• Components combine application logic with an HTML template to render application views. Components are usually represented as HTML elements. They are the building blocks of an Angular application.

• Attribute directives can listen to and modify the behavior of other HTML elements, attributes, properties, and components. They are usually represented as HTML attributes, hence the name.

• Structural directives are responsible for shaping or reshaping HTML layout, typically by adding, removing, or manipulating elements and their children.

---

The difference that components have a template. See Angular Architecture overview.

A directive is a class with a @Directive decorator. A component is a directive-with-a-template; a @Component decorator is actually a @Directive decorator extended with template-oriented features.

---

The @Component metadata doesn't have directives attribute. See Component decorator.

Duchamp

"Directives are like components but they are used in attributes" Components are directives and can have attribute selectors as well. – Impetrate

You can use directives in attributes, this is called attributes directives. – Duchamp

Answer 3

I think in your Angular-2 version directives are not supported in Component decorator, hence you have to register directive same as other component in @NgModule and then import in component as below and also remove directives: [ChildComponent] from decorator.

import {myDirective} from './myDirective';

Adobe