Achieving Interpolation in Angular 2

Question

Hi I am new to angular 2 and typescript and am trying to add html inside the tags of a component. This is what I have so far:

Component({
    selector: 'chart',
    templateUrl: './app/chart/chart.component.html'
})

export class Chart {
}

The html has the following strcuture:

<div class='chart-container'></div>

What I would like is to use the component in the following way:

<chart>
 <p>'Hello World'</p>
</chart>

When angular parses this code it should display the following:

  <chart>
     <div class='chart-container'>
          <p>'Hello World'</p>
      </div>
  </chart>

In angular 1 this was achieved via directive interpolation.Is there any way to achieve this in angular 2?

Possible duplicate of [Passing a component as an 'argument' to another component in Angular 2](http://stackoverflow.com/questions/34575897/passing-a-component-as-an-argument-to-another-component-in-angular-2) — toskv, Feb 21 '16 at 17:08

score 4 · Answer 1 · answered Feb 18 '16 at 15:36

4

chart.component.html should look like

  <div class='chart-container'>
      <ng-content></ng-content>
  </div>

to achieve what you want.

answered Feb 18 '16 at 15:36

1 Answers1