Angular - how to create a child component using Angular CLI

Question

I have created an Angular app using Angular CLI and created one component: ng g c parent.

How do I create child components (e.g. child1 and child2) and integrate them with a parent using angular CLI?

I am trying to create a simple example and understand in some example parent-child component relationship.

this tutorial may be helpful: tektutorialshub.com/adding-child-component-angular-2 — Rich
– Rich, Commented Jan 3, 2019 at 18:29
You can simply create a component with angular CLI. depending on your requirements you can use that component as a child component using input/output parameters. There is no out of the box 'child ' component. — Iman
– Iman, Commented Jan 3, 2019 at 18:35

Yashwardhan Pauranik · Accepted Answer · 2019-01-03 22:10:41Z

17

If you mean to nest the components into the parent you can do it like this

ng generate component parent/child1
ng generate component parent/child2

This generates the child components inside the parent folder. I do this in my apps to keep together what belongs together! Hope it helped

edited Jan 3, 2019 at 22:10

Yashwardhan Pauranik

5,5865 gold badges45 silver badges78 bronze badges

answered Jan 3, 2019 at 18:34

Marvin W.

9071 gold badge6 silver badges10 bronze badges

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

2 Comments

Joe Over a year ago

Can I create parent1/child1 and parent2/child1 or child1 must be unique every time? (even though it is under parent1 and parent2)

Samwise Ganges Over a year ago

@Joe, component names should be unique if there's any chance they will end up being in the same module. If you know they will never be in the same module or component together then I guess you could have to children in different components with the same name but I'd avoid it if possible

Reza · Accepted Answer · 2019-01-03 18:29:08Z

6

you can create as many as component you want

ng g c child1
ng g c child2

Then you need to add them in the Html of ParentComponent

<app-child1></app-child1>
<app-child2></app-child2>

and then using @Input and @Output to pass data between parent and child

answered Jan 3, 2019 at 18:29

Reza

20.1k18 gold badges102 silver badges177 bronze badges

Comments

Chester mi niño · Accepted Answer · 2019-01-03 18:38:24Z

1

You can see child routing configuration y child routing component in Angular.io.

angular.io router

answered Jan 3, 2019 at 18:38

Chester mi niño

911 gold badge2 silver badges7 bronze badges

Collectives™ on Stack Overflow

Angular - how to create a child component using Angular CLI

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related