How to create nested components in Angular 4?

Question

I have created a component called Parent and Child. I want to display all the UI of ChildComponent to my ParentComponent.

child.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {

  testContent = 'child component content...';

  constructor() { }

  ngOnInit() {
  }

}

child.component.html

<p>{{testContent}}</p>

parent.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.scss'],
  directives: [ChildComponent]
})
export class AdminComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

parent.component.html

<div>
  Lorem ipsum
  <app-child></app-child>
</div>

I want to display the contents of child component inside parent component. However, I am encountering an error in Angular 4

"Object literal may only specify known properties, and 'directives' does not exist in type 'Component'."

Do you have any idea what is the alternative property to add child component?

user7332973 · Accepted Answer · 2017-11-24 03:03:36Z

1

Remove directives from the parent component and add the child component to the module declarations array where the parent component lives.

answered Nov 24, 2017 at 3:03

user7332973

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

1 Comment

Adrian Over a year ago

Thanks for that. I have added ChildComponent to module declaration array. @NgModule({ declarations: [ AppComponent, AdminComponent, ChildComponent ], will it not make them the same level?

Sachila Ranawaka · Accepted Answer · 2017-11-24 02:56:32Z

0

Directives and pipes in @component are deprecated since angular RC6. Just remove it from the component.

@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.scss']
})

answered Nov 24, 2017 at 2:56

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Collectives™ on Stack Overflow

How to create nested components in Angular 4?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related