How to create a container component in Angular2

Question

I am learning angular2. What I'm basically trying to do is create a component that (somehow) may contain other components.

I want to say that I want to create a component Cardthat can contain content inside.

That's an example:

<Card>
   <span>Some Content</span>
</Card>

I want to reuse Map, how can I create such a component?

Answer 1

You can use the directive <ng-content></ng-content>in your component template to paste content into this place.

Answer 2

TypeScript ( angular), , HTML- . :

cards.ts

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

@Component({
  selector: 'card',
  template: '<span>Some Content</span>'
})
export class CardComponent {

}

container.ts

import { Component }     from '@angular/core';
import { CardComponent } from './cards.ts';

@Component({
  directives: [CardComponent],
  template: '<div><card></card><card></card></div>'
})
export class ContainerComponent {
}