'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 |
|---|
