angular - To send data from dialog component to other components in angular 6

Question

I have an component called delete which i am displaying in the dialog window. For this component i am injecting data like this:

delete.component.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;

constructor(@Inject(MAT_DIALOG_DATA) public data: any,
        private fb:FormBuilder,) {} <=== Injecting data to component

 public ondelCustomer(): void {  <======== DELETE Function
   this.someContact = this.data;
   this.someContact.id = this.data.id;
   this.customersService.deleteContact('00000000-11111-1111-0000000', 
   this.someContact, this.someContact.id);
  }


 }

delete.compoent.html

  <p>Do you want to delete <span>{{data?.name}}?</span></p>

  <button  (click)="onDelCustomer()">DELETE</button>

The template UI looks like this:

As shown in the code on clicking DELETE button in template(delete.component.html) will call onDelCustomer() function. Which will perform delete operation like this:

  public ondelCustomer(): void {
   this.someContact = this.data;
   this.someContact.id = this.data.id;
   this.customersService.deleteContact('00000000-11111-1111-0000000', 
   this.someContact, this.someContact.id);
  }

Now the issue is i don't want call this ondelCustomer() function in delete component, I want call this ondelCustomer() function in other components, So that i can reuse this delete component.

So i tried like this:

 **HTML**

 <p>Do you want to delete <span>{{data?.name}}?</span></p>

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


 }

On calling the onDelCustomer() I am emitting onDelete event as in above code, and i am calling onDeleteevent in another component(customer component) like this:

customer.component.ts

  import { Component, OnInit,Input } from '@angular/core';
  import { Service } from '../service';
  import { map } from 'rxjs/operators';
  import { IContact } from '../models';
  import {MAT_DIALOG_DATA, MatDialog, MatDialogRef, MatListOption} from 
  '@angular/material';
  import { DeleteComponent } from '../delete/delete.component';

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

  export class CustomerComponent implements OnInit {
  @Input()
  data;

  contacts:IContact[];
  someContact:IContact[];

  constructor(public dialog: MatDialog,
         public customersServiceList: Service) {}

  public async ngOnInit(): Promise<void> {
   this.contacts  = await this.customersServiceList.getContactList();
  }

  public openDialogDelete($event: any): void { 
    const dialogRef: MatDialogRef<DeleteComponent> = 
    this.dialog.open(DeleteComponent,{ width:'350px',data:$event,});
  }

 public onDelete() {
  this.someContact = this.data;
  console.log(this.someContact);
  this.someContact.id = this.data.id;
  this.customersService.deleteContact('00000000-11111-1111-0000000', 
   this.someContact, this.someContact.id);
 }


 }

When i log in customer component i am unable to recive the data from dialog component(i,e delete component).

i am unable guess what's wrong with the code.

DEMO

标签： angulartypescript

Answer 1

On Delete Button Click, call this function:

onDeleteClick() {
  this.dialog.close({action: 1, data: this.data});
}

Here, action and 1 are arbitrary values, can be anything.

Now, in the component from where you have opened the dialog, use this function:

import { Component, OnInit,Input } from '@angular/core';
import { Service } from '../service';
import { map } from 'rxjs/operators';
import { IContact } from '../models';
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef, MatListOption} from '@angular/material';
import { DeleteComponent } from '../delete/delete.component';
@Component({
  selector: 'app-customer',
  templateUrl: './customer.component.html',
  styleUrls: ['./customer.component.css']
})
export class CustomerComponent implements OnInit {
  @Input()
  data;
 contacts:IContact[];

someContact:IContact[];

 constructor(public dialog: MatDialog,
             public customersServiceList: Service) {}



  public async ngOnInit(): Promise<void> {
   this.contacts  = await this.customersServiceList.getContactList();
  }

 public openDialogDelete($event: any): void { 
  this.dialog.open(DeleteComponent, {
    width: '350px',data:$event,
}).afterClosed().subscribe(data => {
  if(data && data.action === 1) {
    this.onDelete(data.data);
  }
});

}

public onDelete(data: any) {
  console.log('called');
this.someContact = data;
console.log(this.someContact);
}


}