CODEWITHSUNDEEP
angulartypescript
alphanumeric
alphanumeric

Reputation: 19329

How to load and customize shared components in Angular

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

Upvotes: 0

Views: 61

Answers (1)

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17570

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

Upvotes: 2

Related Questions