app.component.html

<div style="width: 100%; float: left;">
  <h2>Demo #1: Highcharts with a basic editor</h2>
  <div style="width:30%; float: left;">
    <button (click)="updateInputChart()">Update chart</button>
    <br/>
    <textarea rows="16" cols="50"
      [(ngModel)]="optFromInputString"
    ></textarea>
    <br/>
    <button (click)="toggleSeriesType()">1st series type toggle</button>
  </div>
  <div style="width:65%; float: left;">
    <highcharts-chart 
      [Highcharts]="Highcharts"
      [options]="optFromInput"
      [(update)]="updateFromInput"

      style="width: 100%; height: 350px; display: block;"
    ></highcharts-chart>
  </div>
</div>

<br/>
<hr/>

<div style="width: 100%; float: left;">
  <h2>Demo #2: Highstock with simple updates</h2>
  <div style="width:30%; float: left;">
    <p>Chart title text: </p>
    <input 
      [(ngModel)]="charts[usedIndex].hcOptions.title.text"
      (ngModelChange)="titleChange($event)"
    >
    <br/>
    <p>Data sets:</p>
    <button *ngFor="let i of [0,1,2]"
      (click)="usedIndex = i">
      {{i+1}}
    </button>
  </div>
  <div style="width:65%; float: left;">
    <highcharts-chart
      [Highcharts]="Highcharts"
      [constructorType]="'stockChart'"
      [options]="charts[usedIndex].hcOptions"
      [callbackFunction]="charts[0].hcCallback"
      [(update)]="updateDemo2"

      style="width: 100%; height: 350px; display: block;"
    ></highcharts-chart>
  </div>
</div>
<br/>
<hr/>

<div style="width: 100%; float: left;">
  <h2>Demo #3: Highmaps map chart</h2>
  <highcharts-chart
    [Highcharts]="Highcharts"
    [constructorType]="'mapChart'"
    [options]="chartMap"

    style="width: 100%; height: 650px; display: block;"
  ></highcharts-chart>
</div>