how to deal with components inside components in angular?

Question

Maybe It's simple question but I've been searching for a while and I don't find how to do something like this in angular :

<Parent> <Child1> <Child2> </Parent>

And Define the behavior of the children in the parent component. Is That possible ?

You'll have to be much more precise than that. What does "define the behavior of the children in the parent component" mean? Post a concrete example, and show what you have tried. If you haven't tried anything, then read the angular documentation, or a good book about angular. — JB Nizet
– JB Nizet, Commented Jun 4, 2017 at 14:06

Piotr Drabik · Accepted Answer · 2017-06-04 14:22:24Z

We can base it at <ng-content></ng-content> and CSS class-es:
HTML (app.component.html)

<app-new-accordion> <div class="accord-head-1">Header 1</div> <div class="accord-head-2">Header 2</div> <div class="accord-body-1">Content 1</div> <div class="accord-body-2">Content 2</div> </app-new-accordion>

Component (new-accordion.component.ts)

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

Component HTML (new-accordion.component.html)

<div> <h2><ng-content select=".accord-head-1"></ng-content></h2> <p><ng-content select=".accord-body-1"></ng-content></p> </div> <div> <h2><ng-content select=".accord-head-2"></ng-content></h2> <p><ng-content select=".accord-body-2"></ng-content></p> </div>

ovgu12 · Accepted Answer · 2017-06-04 14:24:48Z

Try https://angular.io/docs/ts/latest/cookbook/component-communication.html. Further references - https://angular.io/docs/ts/latest/api/core/index/ViewChildren-decorator.html - https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html

happyZZR1400 · Accepted Answer · 2017-06-04 14:23:35Z

I think that ng-content is the thing you searching for

from blog of todd moto

// my-component.component.ts import { Component } from '@angular/core'; @Component({ selector: 'my-parent-component', template: ` <div class="my-parent-component"> <ng-content></ng-content> </div> ` }) export class MyComponent {}

this way you can host inside component another component (or anything else)

import {Component} from 'angular2/core'; import {MyComponent} from './my-component.component'; import {MyChildComponent} from './my-component.component'; @Component({ selector: 'my-app', template: ` <div class="app"> <my-parent-component> <my-child-component></my-child-component> <my-child-component></my-child-component> </my-parent-component> </div> `, directives: [ MyComponent,MyChildComponent//this is old angular 2.0.0-beta.10 syntax ] }) export class AppComponent { }

see this plunk

Collectives™ on Stack Overflow

how to deal with components inside components in angular?

3 Answers 3

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Related