Angular custom event implementation for micro frontend communication

Question

I have created micro frontend applications using angular with webpack module federation plug in.

I am trying to send some data from host to remote applications using angular custom events.

I am able to send the data from host to remote as given below

Host application:

            const customEvent = new CustomEvent('test', { detail: { data: formId } });
            window.dispatchEvent(customEvent);

Remote Application:

I have tried by using Renderer2 and fromEvent but no luck.

I am getting the event in the remote application but when i am trying to display the event value, it is not binding to any variable declared in remote app.

        constructor(private renderer: Renderer2) { }

        this.handler = this.renderer.listen(
       'window',
         'test',
        ({ detail }: CustomEvent) => {
               console.log('angular==> ', detail.data);
                this.details=detail.data;
            console.log('this.details==> ', this.details);
              }
       );

When I am trying to access this.details in my html as shown below, it is not displaying the value

Log statement is printing the value in console but html page is not displaying the binding value to "details" string.

        <p>Details of {{details}}</p>

Can you please help me on this. Please let me know if I am missing something here.

Thanks in advance.

After adding window.addEventListener('test',this.handler);- It is listening the events but first time it is not working. My first dispatch event is not listening by using event listener. Please help me on this. — Muqthar Ali, Dec 09 '22 at 17:37

score 0 · Answer 1 · answered Mar 11 '23 at 23:20

Maybe because the change detection of Angular it's not triggered when listening a listener.

Try to manually check, instantiate it and detect change after the assignment to details:

    constructor(private renderer: Renderer2, private ref: ChangeDetectorRef) {
    ...
    this.details=detail.data
    this.ref.detectChanges()
    ...
}

Angular custom event implementation for micro frontend communication

1 Answers1