title: ERROR TypeError: _co.function_name is not a function
body: <p>I want to use one HTML page (component) to another component. 
  But I'm not able to find the click event. </p>
  
  <p><a href="https://i.stack.imgur.com/hwPAV.png" rel="noreferrer"><img src="https://i.stack.imgur.com/hwPAV.png" alt="enter image description here"></a></p>
  
  <p><strong>Dashboard.component :-</strong></p>
  
  <pre><code>import { Component, OnInit, AfterViewInit} from '@angular/core';
  import { Router } from '@angular/router';
  import { ViewChild } from '@angular/core';
  import { HttpClientModule } from '@angular/common/http';  // replaces previous Http service
  import { Http, Response , RequestOptions , Headers , URLSearchParams } from '@angular/http';
  import { FormsModule, ReactiveFormsModule , FormGroup} from '@angular/forms';
  import { HttpModule } from '@angular/http';
  import 'rxjs/Rx';
  import { webserviceurl } from '../../url.constants';
  import { AppAsideComponent } from '../../components/app-aside/app-aside.component';
  
  export class DashboardComponent implements AfterViewInit{
  
              constructor(private router:Router,private http:Http) {          
              }
  
              ngAfterViewInit(): void {
              }
  
              save_outage_index(){
                console.log('click');
              }
  
  }
  </code></pre>
  
  <p>Dashboard.module.ts :- </p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { ChartsModule } from 'ng2-charts/ng2-charts';
  import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
  
  import { DashboardComponent } from './dashboard.component';
  // import { AppAsideComponent } from './../../components/app-aside/app-aside.component';
  import { DashboardRoutingModule } from './dashboard-routing.module';
  
  import { jqxGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid';
  // import { CommonModule } from '@angular/common';
  // import { GridModule } from '../../modules/grid.module';
  // import { PanelModule } from '../../modules/panel.module';
  
  @NgModule({
    imports: [
      DashboardRoutingModule,
      ChartsModule,
      BsDropdownModule,
  
    ],
    declarations: [ DashboardComponent,jqxGridComponent]
  })
  export class DashboardModule { }
  </code></pre>
  
  <p><strong>app-aside.component.html :-</strong></p>
  
  <pre><code>&lt;button type="button" (click)="save_outage_index()" class="btn btn-sm btn-primary" style="background-color: #455D43;" &gt;&lt;i class="fa fa-dot-circle-o"&gt;&lt;/i&gt; Submit&lt;/button&gt;
  </code></pre>
  
  <p><strong>app-aside.component.ts :-</strong> </p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-aside',
    templateUrl: './app-aside.component.html'
  })
  export class AppAsideComponent {
  
    constructor() { }
  }
  </code></pre>
  
  <p>My question is how can I use <strong>app-aside.component.ts</strong> to <strong>dashboard.component.ts</strong>.</p>
  
  <p>I have tried with this code in <strong>dashboard.module.ts</strong> as well as <strong>dashboard.component.ts</strong>.</p>
  
  <pre><code>import { AppAsideComponent } from './../../components/app-aside/app-aside.component';
  </code></pre>
  
  <p>And Use <strong>AppAsideComponent</strong> in declaration like this,</p>
  
  <pre><code>@NgModule({
    imports: [
      DashboardRoutingModule,
      ChartsModule,
      BsDropdownModule,
  
    ],
    declarations: [ AppAsideComponent,DashboardComponent,jqxGridComponent]
  })
  </code></pre>
  
  <p>But it's still showing error that <code>co.save_outage_index is not a function</code>, </p>