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                 lt h1 gt Parent Component lt  h1 gt               lt child gt  lt  child gt                       export class ParentComponent      Component       selector   child           template                 lt h4 gt Child Component lt  h4 gt                       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

User · Accepted Answer

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    lt my-child gt  lt  my-child gt   That s it

User · Answer

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

User · Answer

If you remove directives attribute it should work    Component       selector   parent       template                 lt h1 gt Parent Component lt  h1 gt               lt child gt  lt  child gt                       export class ParentComponent      Component       selector   child           template                 lt h4 gt Child Component lt  h4 gt                       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

[angular] How to put a component inside another component in Angular2?

Examples related to angular

Examples related to angular2-directives