How to bind "name" to a router-outlet to render dynamically created angular-cdk components

Question

I am generating dynamic angular components using angular-cdk and based on article blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular Trying to do this the only option seems feasible is to use named router-outlets like one below <router-outlet name="outletname"></router-outlet> however here i can not bind the name property of the router-outlet and hence the data i am trying to route here gets rendered in very-palce i have re-used this container.

SInce this are dynamically generated components and modularized they are reusable. Also the same can be repeated in terms of useage eg: i can reuse a dynamically generated content-layout-container across various places where i have to implement containers. Hence this containers have to render various components based on data of which route I am trying to render.

Hence this containers have to render various components based on data of which route I am trying to render.

is there a way i can bind the name dynamically thus i can reuse the cdk components without any issues .

Answer 1

From my comment above: at the moment binding to name is not possible though it is a feature request found here github.com/angular/angular/issues/12522, which leads to github.com/angular/angular/issues/17173 for interesting ideas/implementations on how to get around it.

---

It sounds like the work around helped, but you now need to be able to dynamically set the router name in routerLink. I have two suggestions:

1) you can try using computed keys and see if Angular can interpolate them correctly inside the template.

// in Component:   let dynamicRoute = conditionMet ? "blogviewolet" : "otherOutlet";
// in template:    [routerLink] = "[{ outlets: { [dynamicRoute]: [panels.getData('anchor-link-path').fieldValue] } }]"

2) If #1 fails, you can try passing [routerLink] a javascript object from the Component rather than always setting it in the template. If you're able to do your routerLink logic say, before the view loads, you can set your variable and hand it to routerLink.

// in Component 

   theOutlet: any;

   if (conditionMet) {
       this.theOutletObject = [{ outlets: { someOutlet: [ foo ]}}];
   } else {
       this.theOutletObject = [{ outlets: { someOtherOutlet: [ bar ]}}];
   }

// in template:  

   <a [routerLink]="theOutletObject"></a>