Exploring ways to establish communication between parent and child components through click events

Question

Exploring ways to establish communication between parent and child components through click events

I am currently working on an Angular 8 application that involves a parent-child relationship.

The parent component, DossierCorrespondenceComponent, contains a function that needs to be triggered from within the child component.

This is the function in the parent component:

@Input() myGotoItem: Function;

gotoItem(index, type: string) {
    this.showingSingle = true;

    switch (type) {
      case 'correspondence': {
        this.single = this.correspondenceEntries[index];
        break;
      }
      case 'attachments': {
        this.single = this.attachmentEntries[index];
        break;
      }
      default: {
        break;
      }
    }
    this.showingSingle = true;
}

When trying to call this function in the child component, DossierCorrespondenceListComponent, I used the following code:

<tr class="dossier-correspondencerow" *ngFor="let entry of correspondenceEntries; let i = index" (myGotoItem)="gotoItem(i, entry.type)">

However, nothing happens when this interaction takes place.

So, what changes do I need to make to resolve this issue?

In addition, another component, DossierCorrespondenceAttachmentsComponent, also needs to utilize the same function:

<tr class="dossier-correspondencerow" *ngFor="let entry of attachmentEntries; let i = index" (click)="gotoItem(i, entry.type)">

If I move the function gotoItem(index, type: string) to both child components, it will result in duplicate code.

Currently, the parent component is structured as follows:

<ng-container *ngIf="correspondenceEntries">
    <app-dossier-correspondence-list [correspondenceEntries]="correspondenceEntries" (onClick)="gotoItem(i, entry.type)"> </app-dossier-correspondence-list>
  </ng-container>

And the TypeScript code in the parent component:

gotoItem(index, type: string) {
    this.showingSingle = true;

    switch (type) {
      case 'correspondence': {
        this.single = this.correspondenceEntries[index];
        break;
      }
      case 'attachments': {
        this.single = this.attachmentEntries[index];
        break;
      }
      default: {
        break;
      }
    }
    this.showingSingle = true;
}

For the child component:

<tbody class="dossier-tablebody">
          <tr class="dossier-correspondencerow" *ngFor="let entry of correspondenceEntries; let i = index" (click)="gotoItem(i, entry.type)">
            <td>{{ entry.date | date:"dd-MM-y" }}</td>
            <td>{{ entry.name }}</td>
          </tr>
        </tbody>

And the TypeScript code in the child component:


export class DossierCorrespondenceListComponent implements OnInit {

  @Input()
  correspondenceEntries: DossierEntry[];

  @Output()
  onClick = new EventEmitter();

  @Input() showingSingle;

  constructor() { }

  ngOnInit() {
  }

  ngOnChanges(changes) { console.log(changes)}

  click() {
    this.onClick.emit();
  }

}

However, after making these changes, I encountered the following error:

dossier-correspondence-list.component.html:13 ERROR TypeError: _co.gotoItem is not a function
    at Object.handleEvent (dossier-correspondence-list.component.html:13)
    at handleEvent (core.js:29733)
    at callWithDebugContext (core.js:30803)
    at Object.debugHandleEvent [as handleEvent] (core.js:30530)
    at dispatchEvent (core.js:20520)
    at core.js:28942
    at HTMLTableRowElement.<anonymous> (platform-browser.js:1009)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:26760)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)

To address this issue, I made the following change:

 click() {
    this.onClick.emit(true);
  }

dossier-correspondence-item.component.ts:51 ERROR TypeError: _co.gotoItem is not a function
    at Object.handleEvent (dossier-correspondence-item.component.ts:51)
    at handleEvent (core.js:29733)
    at callWithDebugContext (core.js:30803)
    at Object.debugHandleEvent [as handleEvent] (core.js:30530)
    at dispatchEvent (core.js:20520)
    at core.js:28942
    at HTMLTableRowElement.<anonymous> (platform-browser.js:1009)
    at

angular typescript function dom-events

Answer 1

Answer №1

Main Component :

<child (onClick)="navigateToItem()"></child>

navigateToItem() {
    //perform action
}

Sub Component :

<tr class="correspondence-row" *ngFor="let entry of attachmentEntries; let i = index" (click)="handleClick()">

@Output() onClick = new EventEmitter();

handleClick() {
    // perform action
    this.onClick.emit()
}

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

Main Component (html)

<app-correspondence-list [entries]="correspondenceEntries" (onClick)="navigateToItem($event)"> </app-correspondence-list>

Main Component (ts)

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  navigateToItem(event) {
    console.log(event)
  }

}

Sub Component

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

@Component({
  selector: 'app-correspondence-list',
  template: `
    <table>
      <tr *ngFor="let entry of attachmentEntries; let i = index" (click)="handleClick(i, entry.type)">
        {{entry.type}}
      </tr>
    </table>
  `
})
export class AppCorrespondenceComponent  {

  @Input() entries: any;
  @Output() onClick = new EventEmitter();

  attachmentEntries = [
    { type: 'type1' },
    { type: 'type2' },
    { type: 'type3' },
  ]

  handleClick(i, type) {
    this.onClick.emit({
      i: i,
      type: type
    })
  }

}

Link: https://stackblitz.com/edit/angular-ev6e5n

Answer 2

Main Component :

<child (onClick)="navigateToItem()"></child>

navigateToItem() {
    //perform action
}

Sub Component :

<tr class="correspondence-row" *ngFor="let entry of attachmentEntries; let i = index" (click)="handleClick()">

@Output() onClick = new EventEmitter();

handleClick() {
    // perform action
    this.onClick.emit()
}

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

Main Component (html)

<app-correspondence-list [entries]="correspondenceEntries" (onClick)="navigateToItem($event)"> </app-correspondence-list>

Main Component (ts)

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  navigateToItem(event) {
    console.log(event)
  }

}

Sub Component

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

@Component({
  selector: 'app-correspondence-list',
  template: `
    <table>
      <tr *ngFor="let entry of attachmentEntries; let i = index" (click)="handleClick(i, entry.type)">
        {{entry.type}}
      </tr>
    </table>
  `
})
export class AppCorrespondenceComponent  {

  @Input() entries: any;
  @Output() onClick = new EventEmitter();

  attachmentEntries = [
    { type: 'type1' },
    { type: 'type2' },
    { type: 'type3' },
  ]

  handleClick(i, type) {
    this.onClick.emit({
      i: i,
      type: type
    })
  }

}

Link: https://stackblitz.com/edit/angular-ev6e5n

Answer 3

Answer №2

Within the parent component:

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

@Component({
 selector: 'my-app',
 template: `
  <hello [name]="name" (callParentFunc)="parentFunction()"></hello>
  <p [class.red]="clicked">
   This content is coming from the parent component
  </p>
 `,
 styles: [`
  p {
   font-family: Lato;
  }

  p.red {
   color: red;
  }
`]
})
export class AppComponent  {
 name = 'Click me';
 clicked: boolean;

 parentFunction() {
  this.clicked = !this.clicked;
 }
}

Now, for the child component:

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

@Component({
 selector: 'hello',
 template: `<h1>
 Child component <a (click)="childClick()">{{name}}</a>
  </h1>`,
 styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
 @Input() name: string;
 @Output() callParentFunc: EventEmitter<any> = new EventEmitter<any>();

 childClick() {
  this.callParentFunc.emit();
 }
}

For reference, a StackBlitz demo has been set up:

https://stackblitz.com/edit/angular-c9egd6

Answer 4

Within the parent component:

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

@Component({
 selector: 'my-app',
 template: `
  <hello [name]="name" (callParentFunc)="parentFunction()"></hello>
  <p [class.red]="clicked">
   This content is coming from the parent component
  </p>
 `,
 styles: [`
  p {
   font-family: Lato;
  }

  p.red {
   color: red;
  }
`]
})
export class AppComponent  {
 name = 'Click me';
 clicked: boolean;

 parentFunction() {
  this.clicked = !this.clicked;
 }
}

Now, for the child component:

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

@Component({
 selector: 'hello',
 template: `<h1>
 Child component <a (click)="childClick()">{{name}}</a>
  </h1>`,
 styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
 @Input() name: string;
 @Output() callParentFunc: EventEmitter<any> = new EventEmitter<any>();

 childClick() {
  this.callParentFunc.emit();
 }
}

For reference, a StackBlitz demo has been set up:

https://stackblitz.com/edit/angular-c9egd6

Answer 5

Answer №3

CommunicationModuleComponent.html :

<app-child (triggerFunction)="executeFunction()"</app-child>

CommunicationModuleComponent.ts :

executeFunction() {
}

child.component.ts

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

@Output() triggerFunction = new EventEmitter();

When you want to trigger the parent component:

this.triggerFunction.emit(true)

Answer 6

CommunicationModuleComponent.html :

<app-child (triggerFunction)="executeFunction()"</app-child>

CommunicationModuleComponent.ts :

executeFunction() {
}

child.component.ts

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

@Output() triggerFunction = new EventEmitter();

When you want to trigger the parent component:

this.triggerFunction.emit(true)

Exploring ways to establish communication between parent and child components through click events

Answer №1

Answer №2

Answer №3

Similar questions

Issues with updating values in Angular form controls are not being resolved even with the use of [formControl].valueChanges

Obtain data from the DOM using ng-select in Angular 10

Having trouble with clearInterval in my Angular code

Storing and sharing information between routes in Angular 2: The ultimate guide

Ways to transfer selected options from a dropdown menu to a higher-level component

Any idea how to resolve this typescript typing issue: "The argument, either a string or number, cannot be assigned to the parameter of type 'SetStateAction<string>'"?

Managing Import Structure in Turborepo/Typescript Package

Tips on handling communication between different feature modules each handling their own portion of the state

Protected members in Angular 2 component templates using TypeScript

Executing a PHP function within a Laravel controller using Ajax

What causes multiple links to have an active class when using Angular2's routerLinkActive?

Edge is experiencing a slowdown when utilizing ng-bind-html

npm WARNING: The package @angular-devkit/[email protected] is in need of a peer dependency xxxx, however no installation for this dependency has

Problem encountered while implementing callbacks in redux-saga

Utilize multiple validators.patterns within a single value for enhanced data validation

Angular 5: Steps to send an event from authguard to header in Angular application

Instruction to pay attention to the event

What sets apart calling an async function from within another async function? Are there any distinctions between the two methods?

Unit testing Angular components involves testing a service creation through an interface

Dynamic cell loading in Vue using Vuetify's datatable functionality