Parent function is not calling when event emit in Angular 6 after routing to a new module

Question

I created a new module in Angular 6, other than app - module.
1. Created two components: query-bulider and query-panel.
2. query-builder is parent component and query-panel is child component.
3. not able to call parent function from the child component.
---inside query-bulider html <query-panel (msgEvent)="recieveMsg($event)"></query-panel>

---inside query-panel html

    <button class='btn btn-primary' (click)="sendMessage()">Click me</button>

-----inside query-bulider component

@Component({
  selector: 'query-builder',
  templateUrl: './query-builder.component.html',
  styleUrls: ['./query-builder.component.css']
})
export class QueryBuilderComponent implements OnInit {


  submitted = false;

  constructor() { }

  ngOnInit() {
  }
  recieveMsg(event){
    console.log('inside builder component');
  }


}

----------inside query-panel component

import { Component, OnInit, Output, EventEmitter } from '@angular/core';


@Component({
  selector: 'query-panel',
  templateUrl: './query-panel.component.html',
  styleUrls: ['./query-panel.component.css']
})
export class QueryPanelComponent implements OnInit {

  @Output() msgEvent = new EventEmitter();
  constructor() { }



  ngOnInit() {
    this.msgEvent = new EventEmitter();
  }




    sendMessage(){

       this.msgEvent.emit('Stop');
       console.log('send  message');

    }

}

----------------App componet html

 <router-outlet></router-outlet>

---------App module---

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from "@angular/router";


import { AppComponent } from './app.component';
import { QueryBuilderModule } from './component/query-builder/query-builder.module';
import { QueryBuilderComponent } from './component/query-builder/query-builder.component';
import { TestComponent } from './test/test.component';


const appRoutes: Routes=[
  {
      path:'', component:QueryBuilderComponent
  }]

  export const routing= RouterModule.forRoot(appRoutes);



@NgModule({
  declarations: [
    AppComponent,
    TestComponent,

  ],
  imports: [
    BrowserModule,
    QueryBuilderModule,
    routing
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

---------Query bulider module--

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ObjectBrowserComponent } from '../object-browser/object-browser.component';
import { QueryPanelComponent } from '../query-panel/query-panel.component';
import { OutputPanelComponent } from '../output-panel/output-panel.component';
import { QueryBuilderComponent } from './query-builder.component';
import { TreeViewComponent } from '@syncfusion/ej2-angular-navigations';


@NgModule({
  imports: [
    CommonModule,


  ],
  declarations: [
    QueryBuilderComponent, 
    ObjectBrowserComponent,
    QueryPanelComponent,
    OutputPanelComponent,
    TreeViewComponent
  ],
  bootstrap: [QueryBuilderComponent]
})
export class QueryBuilderModule { }

using ViewChild parent client relationship parent can access client methods, could you try out event emitter from client to parent may be this article would be useful ..https://stackoverflow.com/questions/37587732/how-to-call-another-components-function-in-angular2 — Gopal, Feb 26 '19 at 08:44
Is your button from query panel displayed ? Do you have your `send message` log ? — Cyril, Feb 26 '19 at 09:19

score 0 · Answer 1 · answered Feb 26 '19 at 09:56

Your code is working fine except the following in your QueryPanelComponent-

ngOnInit() {
  this.msgEvent = new EventEmitter();    // remove this
}

As you already declared an Output parameter msgEvent as an instance of EventEmitter, you should remove it from ngOnInit()

See it live here.

score 0 · Answer 2 · answered Feb 26 '19 at 09:59

0

you have extra initialaztion of event Emitter

 ngOnInit() {
    this.msgEvent = new EventEmitter();
  }

remove this and it will work

answered Feb 26 '19 at 09:59

onik

1,579
1
11
19

Parent function is not calling when event emit in Angular 6 after routing to a new module

2 Answers2