1

Hi i want to call parent function via child component and i used eventemitter, every thing seems fine but my function is not getting called.

this is child component.ts


import { Component, EventEmitter, forwardRef, HostBinding, Input,Output,ViewChild } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'month-date-picker',
  templateUrl: './month-date-picker.component.html',
  styleUrls: ['./month-date-picker.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MonthDatePickerComponent),
      multi: true
    }
  ]
})
export class MonthDatePickerComponent implements ControlValueAccessor {

@Output() testfunction : EventEmitter<any>  = new EventEmitter()
 prevent(e){
    this.testfunction.emit(null)
}

this is child component.html

<button class="btn btn-outline-secondary dropdown-toggle-split" ngbDropdownToggle (click)="prevent($event)">
      <div class="calendar" aria-hidden="true"></div>
    </button>

this is parent component.html

 <month-date-picker *ngIf="dmanuyear&& compshow == true" name="manufactureYeardup" [manudata]="dmanuyear" formControlName="manufactureYeardup" (checkdate)="checkdate($event)"  (testfunction)="funcheck($event)">
                        </month-date-picker>

this is parent component.ts

public funcheck(event):void{
    console.log(event)
    alert("hiiiiii")
  }
Philipp Meissner
  • 5,273
  • 5
  • 34
  • 59
Abdul zany
  • 23
  • 7
  • 2
    `prevent` method is not getting called I guess, could you share a stackblitz with the basic issue replicated and share back on the question? – Naren Murali Dec 13 '22 at 08:02
  • sure... i gave an alert in prevent function, its working..! – Abdul zany Dec 13 '22 at 08:45
  • Please replicate the issue on this [stackblitz](https://stackblitz.com/edit/angular-5iqnrz?file=src%2Fapp%2Fhello.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.module.ts) – Naren Murali Dec 13 '22 at 08:48
  • https://stackblitz.com/edit/angular-ivy-yppn6x?file=src%2Fapp%2Fmonth-date-picker%2Fmonth-date-picker.component.ts,src%2Fapp%2Fmonth-date-picker%2Fmonth-date-picker.component.html,src%2Fapp%2Fmonth-date-picker%2Fmonth-date-picker.module.ts,src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts its working in stackblitz , but not in my code same function i called...! may be of angular version?, in stackblitz its 15 and mine is angular 14 any suggestion – Abdul zany Dec 13 '22 at 09:19
  • i figured it out @NarenMurali , thanks! there was a bit confusion , actualy the component was used two times in same page, i was checking the first one, but not the second..!, in that second import they haven't called the respective function, tht was the error... now its working fine – Abdul zany Dec 13 '22 at 09:45
  • Glad its resolved, do answer your own question and accept your own answer! – Naren Murali Dec 13 '22 at 10:39

1 Answers1

0

function wasn't called on imported child component!

<month-date-picker *ngIf="dmanuyear&& compshow == true" name="manufactureYeardup" [manudata]="dmanuyear" formControlName="manufactureYeardup" (checkdate)="checkdate($event)" (testfunction)="funcheck($event)"> </month-date-picker>

Abdul zany
  • 23
  • 7
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 17 '22 at 20:19