ERROR TypeError: _co.function_name is not a function

Question

I want to use one HTML page (component) to another component. But I'm not able to find the click event.

Dashboard.component :-

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');
            }

}

Dashboard.module.ts :-

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 { }

app-aside.component.html :-

<button type="button" (click)="save_outage_index()" class="btn btn-sm btn-primary" style="background-color: #455D43;" ><i class="fa fa-dot-circle-o"></i> Submit</button>

app-aside.component.ts :-

import { Component } from '@angular/core';

@Component({
  selector: 'app-aside',
  templateUrl: './app-aside.component.html'
})
export class AppAsideComponent {

  constructor() { }
}

My question is how can I use app-aside.component.ts to dashboard.component.ts.

I have tried with this code in dashboard.module.ts as well as dashboard.component.ts.

import { AppAsideComponent } from './../../components/app-aside/app-aside.component';

And Use AppAsideComponent in declaration like this,

@NgModule({
  imports: [
    DashboardRoutingModule,
    ChartsModule,
    BsDropdownModule,

  ],
  declarations: [ AppAsideComponent,DashboardComponent,jqxGridComponent]
})

But it's still showing error that co.save_outage_index is not a function,

Answer 1

The click handler save_outage_index needs to be defined in the same component as the template.

So you need to add the handler in the app-aside.component.ts file

@Component({
  selector: 'app-aside',
  templateUrl: './app-aside.component.html'
})
export class AppAsideComponent {

  constructor() { }


    save_outage_index(){
      console.log('click');
    }
}

Now, if you want to include the app-aside component in the dashboard, you need to add this html to your dashboard component's html

dashboard.component.html

<app-aside></app-aside>

If they are in the same module, there is no extra work. If not, you need to import the module containing the app-aside component inside your dashboard module

Answer 2

If you want to use component in another component you should do :

1. Create component

2. Declare and Export it in module in your case :

   exports: [AppAsideComponent],

3. Use it like this in another component html : <appaside></appaside>

Edit :

If you are trying to reach a component from another module you also need to import that module which is exporting that component.

In your case you should add app-aside module into dashboard module.

Explanation :

If you have 2 modules with some components You have to declare these components in their parent modules. After that, you have to export components which will be used in other components. And if you want to reach another component from another module, you have to import that module in the module you want to use that component.

If that helps, please mark that is correct answer.