CODEWITHSUNDEEP
angular
Kevin Vincent
Kevin Vincent

Reputation: 617

how to deal with components inside components in angular?

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 ?

Upvotes: 1

Views: 141

Answers (3)

ovgu12
ovgu12

Reputation: 130

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

Upvotes: 1

happyZZR1400
happyZZR1400

Reputation: 2405

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

Upvotes: 0

Piotr Drabik
Piotr Drabik

Reputation: 131

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>

Upvotes: 1

Related Questions