'How to send data to a federated module on Angular 13?

Currently I can load a federated module on a wrapper component, however my the way I used to do it on Angular 12 is completely different in Angular 13.

So I have no idea how to send data (Say a variable for the name displayed on the component) to my federated module/component.

Here is my code:

import {
  Component,
  Input,
  Injector,
  OnInit,
  ViewChild,
  ViewContainerRef,
  ɵcreateInjector,
} from '@angular/core';
import { loadRemoteModule } from '@angular-architects/module-federation';

@Component({
  selector: 'remote-component',
  templateUrl: './remote.component.html',
  styleUrls: ['./remote.component.scss'],
})
export class RemoteComponent implements OnInit {
  @ViewChild('federatedComponent', { read: ViewContainerRef })
  federatedComponent: ViewContainerRef;
  @Input() remoteEntry: string;
  @Input() remoteName: string;
  @Input() exposedModule: string;
  @Input() componentName: string;

  constructor(private injector: Injector) {}
  ngOnInit(): void {
    loadRemoteModule({
      remoteEntry: this.remoteEntry,
      remoteName: this.remoteName,
      exposedModule: this.exposedModule,
    }).then((federated) => {
      const { instance } = this.federatedComponent.createComponent(
        federated[this.exposedModule].exports.find(
          (e) => e.ɵcmp?.exportAs[0] === this.componentName
        ),
        {
          injector: ɵcreateInjector(
            federated[this.exposedModule],
            this.injector
          ),
        }
      );
    });
  }
}

I'm pretty sure there is a small next step, but Image that federated module display a string, how would you send the string into the component?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source