How to bind a custom event to parent element in angular?

Question

I am using angular-resize-event tool to listen resize of my items.

So I can listen any element using <div (resized)="onResized($event)"></div>

But I need to use this in my nested component to listen parent.

I am using my ChartComponent in my WidgetComponent init function like following:

init function of ChartComponent is:

ngOnInit() {
     let chartComponent = this.elementRef.nativeElement.parentElement;
     let widgetContainerComponent = chartComponent.parentElement;
     let cardBody = widgetContainerComponent.parentElement;

     this.renderer.listen(cardBody, 'resized', (event) => {
       console.log(event)
    })
}

But this is not working. But if I add click listener, it is working.

    this.renderer.listen(cardBody, 'click', (event) => {
       console.log(event)
    })

I want to listen parent resized event from child component. If parent size change, I will set the width and height of Chart in child component (ChartComponent).

How can I set resized event?

So you want your child component listen then event from parent? — Tzimpo
I want to listen parent resized event from child component. If parent size change, I will set the Chart of child component. — barteloma

Tzimpo Tzimpo · Accepted Answer · 2020-02-28T10:25:00

If you want your child component listen from parent you can use EventEmitter. An example;

On your child component add an EventEmitter:

@Input() private uploadSuccess: EventEmitter<boolean>;

Additionally in childComponent.ts subscribe to the event:

ngOnInit() {
  if (this.uploadSuccess) {
   this.getEvent.subscribe(data => {
     // Do something in the childComponent after parent emits the event.
   });
  }
}

Parent Component

In ParentComponent.html

<child-component  [uploadSuccess] = "uploadSuccess" > </child-component>

In ParentComponent.ts

private uploadSuccess: EventEmitter<boolean> = new EventEmitter();

  onImageUploadSuccess(event) {
    console.log('Image Upload succes');
    if (event.code === 'OK' && this.maxUploadLimit > 0) {
      this.galleryImagesCount = this.galleryImagesCount + 1;
      this.maxUploadLimit = this.maxUploadLimit - 1;
     }

      // The parent emits the event which was given as `@Input` variable to the child- 
   component
     this.uploadSuccess.emit(true);
   }

How to bind a custom event to parent element in angular?

1 Answers