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.