CODEWITHSUNDEEP
javascriptangular
Pablo
Pablo

Reputation: 10602

How to make a container component in Angular2

I'm learning angular2, What I'm basically trying to do is to create a component, that (some how), could contain other components.

I mean, I want a to create a component Card that could have content inside.

This is an example:

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

I want to could re-use Card many times, how can I create a component like that?

Upvotes: 4

Views: 1935

Answers (2)

dmlittle
dmlittle

Reputation: 999

If you're using TypeScript (which angular recommends), you can import a component with a selector defined, add it as directive and use the selector in the HTML of the encompassing component. This can be done as follows:

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 {
}

Upvotes: 2

Comptonburger
Comptonburger

Reputation: 594

You can use the directive <ng-content></ng-content> in your component's template to insert the content at that location.

Upvotes: 3

Related Questions