webpack-module-federation-with-angular/code-demos/web-component-directive-ng16/shell-ng16/src/app/app.component.html at main · edumserrano/webpack-module-federation-with-angular · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="card">
  Shell running Angular {{ version }}
  <p *ngIf="componentLoaded">
    <button (click)="reload()">Reload</button>
  </p>
  <p *ngIf="!componentLoaded">Loading component from remote...</p>
  <p *ngIf="componentLoaded">Web component has been loaded from remote!</p>
  <my-mfe-element
    loadRemoteWebComponent
    exposedModule="./standalone-component-as-web-component"
    remoteEntry="http://localhost:4201/remoteEntry.js"
    (loaded)="componentLoadedHandler()"
    input-text="Hello from shell!"
    (message-sent)="onMessageSent($event)"
  ></my-mfe-element>
  <p *ngIf="componentLoaded">Message received by the shell from the Web component:</p>
  <p *ngIf="componentLoaded">{{ message }}</p>
</div>