Render EJ1 Gantt control with EJ2 components in Angular

//app.component.ts
 
import { Component} from '@angular/core';
@Component({
    selector: 'app-container',
template: `<nav>
    <a routerLink="/first">Grid</a>
    <a routerLink="/second">Gantt</a>
  </nav><router-outlet></router-outlet>`,
})
export class AppComponent{
 
}
 

//first.component.ts
@Component({
    selector: 'app-container',
    template: `<ejs-grid #grid [dataSource]='data' height='200px' [enablePersistence]='true' [allowReordering]='true' [allowResizing]='true' [allowSorting]='true' [allowFiltering]='true'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                    <e-column field='OrderDate' headerText='OrderDate' editType='datepickeredit' width='170'></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
                </e-columns>
                </ejs-grid>`
})
export class FirstComponent implements OnInit {
 
    public data: Object[];
    public groupOptions: Object[];
 
    @ViewChild('grid')
    public grid: GridComponent;
 
    ngOnInit(): void {
        this.data = data;
    }
}
 

 
//second.component.ts
 
@Component({
    selector: 'app-container',
    template:`<ej-gantt id='GanttControl' [dataSource]='ganttData' taskIdMapping='taskID' taskNameMapping='taskName'
            startDateMapping='startDate' endDateMapping='endDate' progressMapping='progress' durationMapping='duration'
             predecessorMapping='predecessor' childMapping='subtasks'
             scheduleStartDate='02/01/2014' scheduleEndDate='04/09/2014'
            sizeSettings.height='450px' sizeSettings.width='100%'>
</ej-gantt>`
})
export class SecondComponent {
   public ganttData: Object[];
 
    ngOnInit(): void {      
      this.ganttData =  [{
         taskID: 1,
         taskName: "Planning",
         startDate: "02/03/2014",
         endDate: "02/07/2014",
         progress: 100,
         duration: 5,
         subtasks: [
             { taskID: 2, taskName: "Plan timeline", startDate: "02/03/2014", endDate: "02/07/2014", duration: 5, progress: 100 },
             { taskID: 3, taskName: "Plan budget", startDate: "02/03/2014", endDate: "02/07/2014", duration: 5 },
             { taskID: 4, taskName: "Allocate resources", startDate: "02/03/2014", endDate: "02/07/2014", duration: 5, progress: 100 },
             { taskID: 5, taskName: "Planning complete", startDate: "02/07/2014", endDate: "02/07/2014", duration: 0, progress: 0 }
         ]
     }]  
    }
}