Example of the post message set-up in Angular 9

iframe-example.ts

import { Component } from '@angular/core';
import { Router, NavigationStart, Event as NavigationEvent } from '@angular/router';

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

  ngOnInit() {
    window.addEventListener('message', (message) => {
      if (message.origin.includes('react')) {
        const afterPeople = message.data.pathname
        this.router.navigate([afterPeople])
      }
    })
    this.router.events.subscribe(
      (event: NavigationEvent) => {
        if(event instanceof NavigationStart) {
          window.parent.postMessage(
            {pathname: event.url},
            'https://react.microfrontends.app'
          )
        }

      }
    )
  }
  title = 'Tour of Heroes';
}


/*
Copyright Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/