send param to Angular Element from Master App (Micro FrontEnd)

Question

i make a small angular application and convert it into angular element to use it as a micro frontend in other master App and it looks great and works fine. but I need to pass a value from Master App to the Micro App but didn't work with me. can anyone help with this issue.

Micro Application app.module.ts

export class AppModule {

  constructor(private injector: Injector) { }

    ngDoBootstrap(){
      const element = createCustomElement(AppComponent, {injector: this.injector});
      customElements.define('micro-fe', element);
    }
}

Micro Application app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Micro-FE';
  @Input() public myName: string = "";

  ngOnInit() {
      console.log(this.myName);
    }
}

Micro Application app.component.html

<h1>Hello From Micro-Frontend !!!!!</h1>
<h2>My Name : {{myName}}</h2>

and in the Master Application index.html

<!doctype html>
<html lang="en">
<body>
  <app-root></app-root>

  <micro-fe myName="Amr"></micro-fe>
  <script src="assets/Micro-FE/main.js"></script>
  <script src="assets/Micro-FE/polyfills.js"></script>
  <script src="assets/Micro-FE/runtime.js"></script>
  
</body>
</html>

I’d expect this to work actually..? What happens when you put an ngOnchanges in the WC with a console? — MikeOne
– MikeOne, Commented Aug 21, 2022 at 12:33
@MikeOne where to put the ngOnchanges on Micro App or Master App ? — Amr Eshra
– Amr Eshra, Commented Aug 21, 2022 at 12:43
Two angular applications cannot communicate between one another natively, you can do it by sending events to the window from app A (window.dispatchEvent()), and listening to the events on app B (fromEvent(window, '...').subscribe()). Here is an article — Get Off My Lawn
– Get Off My Lawn, Commented Aug 21, 2022 at 14:29
@MikeOne thanks Mike it works fine with me, but what is the good explanation for this change, from myName -> my-name — Amr Eshra
– Amr Eshra, Commented Aug 22, 2022 at 6:50

Gokce Akcan · Accepted Answer · 2022-08-29 20:57:18Z

0

You need to use property binding and quotes with string. I don't see any other reason why it wouldn't work.

Try <micro-fe [myName]="'Amr'"></micro-fe>

answered Aug 29, 2022 at 20:57

Gokce Akcan

711 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

send param to Angular Element from Master App (Micro FrontEnd)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related