How to load and customize shared components in Angular

0
votes

enter image description here

Clicking Show Hello message should load the HelloComponent displaying "Hello" message on the main page.

Clicking Show Product 1 should load ProductComponent customizing it so it displays "Product 1 Works!" message.

Clicking Show Product 2 should load ProductComponent again but this time customizing it so it shows "Product 2 Works!".

How to implement this functionality? Here is the link to Stackblitz project:

https://stackblitz.com/edit/angular-ivy-qkparn?file=src%2Fapp%2Fapp.component.ts

enter image description here

1
angulartypescript
JFYI, the stackblitz project isn't building. - Manish
In demo both route and shared service includes you can check it stackblitz.com/edit/angular-ivy-obsjrv - pc_coder
The Stackblitz project should be running well now. Thanks for pointing out! - alphanumeric

1 Answers

2
votes

Demo Firstly to run router you need to add <router-outlet></router-outlet> in your component.

for communication between unrelated components there are several ways. These are selected based on your needs.

One of them is writing service . This is commonly choosen between components. You can share data with this service. But disadvantage of this is that when you refresh page you can't reach data anymore. If you want to keep data in service , you can stora data in localStorage or sessionStorage.

Another way is routing. Here your problem is that when you have multiple link with same component and different params. You can route but you can't notice to component that reinitialized then you need to set onSameUrlNavigation as reload and shouldReuseRoute of routeReuseStrategy as false.

You can use both way as communicaiton between unrelated components. For parent child component @Input method is easiest way to communicate