angularparent-childangular14angular-event-emitter

@output eventemitter is not working-angular 14


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")
  }

Solution

  • 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>