Messaging with RxJS

AppMessengerService.ts

import { Subject } from "rxjs";
import { Injectable } from "@angular/core";

@Injectable()
export class AppMessengerService {

	constructor() {
		this.message$ = new Subject();
	}
	// Subscribe to this to listen for messages.
	public message$: Subject<any>;
	// Use this method to send any type of message through the system.
	public sendMessage(message: any) {
		this.message$.next(message)
	}

}

DeleteContactMessage.ts

import { Contact } from "../contact-api";

// This class acts as our message contract. Make each message type its own class.
export class DeleteContactMessage {

	constructor(init?: Partial<DeleteContactMessage>) {
		Object.assign(this, init);
	}

	public contact: Contact;

}

DetailComponent.ts

import { Component } from '@angular/core';
import { Contact } from '../../core/models/contact-api/';
import { AppMessengerService } from '../../core/services/app-messenger.service';
import { DeleteContactMessage } from '../../core/models/messages/index';

@Component({
	selector: "contact-detail-component",
	templateUrl: "./contact-detail.component.html",
	styleUrls: ["./contact-detail.component.scss"]
})
export class ContactDetailComponent {

constructor(
		private _appMessenger: AppMessengerService
	) {
	}
      
	// Here we are sending a delete message.
	public delete(contact: Contact) {
		let message = new DeleteContactMessage({ contact: contact });
		this._appMessenger.sendMessage(message);
		this.dialogRef.close();
	}

}

MainComponent.ts

import { Component, OnInit } from '@angular/core';
import { PagedData, Contact } from '../../core/models/contact-api';
import { ContactService } from '../../core/services/contact.service';
import { AppMessengerService } from '../../core/services/app-messenger.service';
import { DeleteContactMessage } from '../../core/models/messages';
import { MatDialog, MatDialogRef } from '@angular/material';
import { DeleteDialogComponent } from '../delete-dialog/delete-dialog.component';
import { ContactViewModel } from '../../core/models/contact-view-model';

@Component({
	selector: "contacts-component",
	templateUrl: "./contacts.component.html",
	styleUrls: ["./contacts.component.scss"]
})
export class ContactsComponent implements OnInit {

	public paged: PagedData<Contact>;
	public list: Array<ContactViewModel>;
	public activeViewModel: ContactViewModel;
		
	private _contactDetailDialog: MatDialogRef<ContactDetailComponent>;

	constructor(
		public dialog: MatDialog,
		private _contactService: ContactService,
		private _appMessenger: AppMessengerService
	) { }

	public ngOnInit() {
		this._contactService.getContacts(1, 25, "").subscribe(c => {
			this.paged = c;
			this.list = c.items.map(c => new ContactViewModel({ contact: c }));
		});
		// Here we register to listen for messages.
		this._appMessenger.message$.subscribe(message => {
		  // Check the message type before taking action
			if (message instanceof DeleteContactMessage) {
				this.delete(message.contact)
			}
		});
	}
  // function called after message is received
	public delete(contact: Contact) {
		let dialogRef = this.dialog.open(DeleteDialogComponent, {
			width: '250px',
		});
		dialogRef.afterClosed().subscribe(result => {
			if (result === true) {
				this._contactService.delete(contact).subscribe();
				this.list = this.list.filter(vm => vm.contact.id !== contact.id);
				this.paged.totalItems -= 1;
				if (this._contactDetailDialog) {
					this._contactDetailDialog.close();
				}
			}
		});
	}
		
}