In my application, I have 2 components named list and details, which are nested inside a parent component called customer.
When the user clicks the delete button within the details component, a dialog window pops up like this:
https://i.sstatic.net/hd4t3.png
Upon clicking the delete button within the dialog window, an event named onDelete is triggered along with the associated JSON values. This allows me to reuse the onDelete function in other components.
HTML
<p>Do you want to delete <span>{{data?.title}} ?</span></p>
<br>
<button (click)="onDelCustomer()">DELETE</button>
TS
import { Component, Input , OnInit, Output, Inject, EventEmitter } from
'@angular/core';
import {
FormBuilder,
FormControl,
FormGroup,
Validators,
} from '@angular/forms';
import {MAT_DIALOG_DATA} from '@angular/material';
@Component({
selector: 'app-delete',
templateUrl: './delete.component.html',
styleUrls: ['./delete.component.css']
})
export class DeleteComponent {
@Input()
public contact;
@Output() public onDelete: EventEmitter<{}> = new EventEmitter();
constructor(@Inject(MAT_DIALOG_DATA) public data: any,
private fb: FormBuilder,) { }
public onDelCustomer(): void {
this.onDelete.emit(this.data); <==========
console.log(this.data)
}
}
After logging the emitted JSON values in the delete component, I can see them successfully:
https://i.sstatic.net/Djrgl.png
However, when I attempt to log the same emitted values in the customer component, they do not appear. I am calling the emitted function like this:
public onDelete() {
this.someContact = this.data; <========
console.log(this.someContact);
}
Updated code
Previously, I was handling the delete operation within the delete component itself as shown below:
public onDelCustomer(): void { <============== code for deleting customer
this.someContact = this.data;
this.someContact.id = this.data.id;
this.customersServiceList.deleteContact('00000000-11111-1111-0000000',
this.someContact, this.someContact.id);
}
Now, I want to shift the delete operation to the customer component like this:
public onDelete() {
this.someContact = this.data;
this.someContact.id = this.data.id;
this.customersServiceList.deleteContact('00000000-11111-1111-0000000',
this.someContact, this.someContact.id);
}
This change is aimed at transforming the delete component into a more generic component so that it can be reused effectively throughout the application.