How do I properly pass data from a component to another in angular 2
<p>I have these codes:</p>

<p>moduleOne.component.ts:</p>

<pre><code>@Component({
  selector: 'one',
  templateUrl: './moduleOne.component.html'
})


export class ModuleOneComponent {

  private ag: AgGridModel;

  private columnDefs = [    
    {headerName: "Sport", field: "sport", width: 110, suppressMenu: true},
    {headerName: "Gold", field: "gold", width: 100, suppressMenu: true},
    {headerName: "Silver", field: "silver", width: 100, suppressMenu: true},
    {headerName: "Bronze", field: "bronze", width: 100, suppressMenu: true},
    {headerName: "Total", field: "total", width: 100, suppressMenu: true}
  ];

  constructor(){
    this.ag.id = "one";
    this.ag.tableName = "module one";
    this.ag.colDefs = this.columnDefs;

    // Define delegate button
    var delegateBtn = new buttonModel(
      'delegateId',
      'Delegate',
      'glyphicon icon-arrow_right',
      this.delegateJob
    ) ;

    // Define print button
    var printBtn = new buttonModel(
      'printId',
      'Print',
      'glyphicon print',
      this.printJob
    );

    this.ag.gridButtons.push(printBtn);
    this.ag.gridButtons.push(delegateBtn);
  }


  private delegateJob() {

    // TODO: call delegateModal
    return;
  }

  private printJob() {

    // TODO: call delegateModal
    return;
  }
}
</code></pre>

<p>moduleOne.component.html:</p>

<pre><code>&lt;div class="container-fluid single-col-full-width-container"&gt;
  &lt;ag-grid-common [ag]="ag" &gt;&lt;/ag-grid-common&gt;
&lt;/div&gt;
</code></pre>

<p>ag-grid-common.component.ts:</p>

<pre><code>@Component({
  selector: 'ag-grid-common',
  templateUrl: './ag-grid-common.component.html'
})

export class AgGridCommonComponent implements OnInit {

  @Input() public ag: AgGridModel;
  private gridOptions:GridOptions;
  private rowCount;

  ngOnInit(){

    this.gridOptions = this.ag.gridOptions;

    // Dynamically create ag-grid in the selected element
    var idSelector = '#' + this.ag.id;
    var gridDiv = &lt;HTMLInputElement&gt;document.querySelector(idSelector);
    new Grid(gridDiv, this.gridOptions);

    this.createNewDatasource();
  }

  constructor() {

  }
}
</code></pre>

<p>ag-grid-common.component.html:</p>

<pre><code>&lt;div style="width: 100%"&gt;

  &lt;div class="row"&gt;
    &lt;div class="col-sm-12"&gt;
      &lt;div class="col-sm-1" *ngFor="let btn of ag.gridButtons"&gt;
        &lt;cui-button [id]="btn.id" [iconClass]="btn.icon" (click)="btn.callbackFunc"&gt;{{btn.name}}&lt;/cui-button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;div style="height: 320px; padding-top: 10px;" [id]="ag.id" class="ag-fresh"&gt;&lt;/div&gt;
</code></pre>

<p>The ag variable of ag-grid-common is an input variable from moduleOne
and some attributes of the ag variable are used in ag-grid-common.component.html</p>

<p>I got this error: ag-Grid: no div element provided to the grid</p>

<p>When I check the page source, all directives with ag are not loaded.</p>

<p>here is the page source:</p>

<pre><code>&lt;ag-grid-common ng-reflect-ag="[object Object]"&gt;
&lt;br&gt;
&lt;div style="width: 100%"&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-sm-12"&gt;
      &lt;!--template bindings={}--&gt;
      **&lt;div class="col-sm-1"&gt;**
      &lt;/div&gt; 
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div style="padding: 4px; width: 100%; "&gt;
    &lt;div style="height: 6%;"&gt;
      Page Size:
      &lt;select&gt;
        &lt;option selected="" value="10"&gt;10&lt;/option&gt;
        &lt;option value="100"&gt;100&lt;/option&gt;
        &lt;option value="500"&gt;500&lt;/option&gt;
        &lt;option value="1000"&gt;1000&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;

    &lt;div class="ag-fresh" style="height: 320px; padding-top: 10px;"&gt;&lt;/div&gt;
    &lt;br&gt;&lt;/div&gt;

&lt;/div&gt;
&lt;/ag-grid-common&gt;
</code></pre>