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 .

Are you asking how to build routes dynamically? If so, check out `resetConfig` as shown here: https://stackoverflow.com/questions/42928030/is-it-possible-to-build-add-routes-dynamically-in-angular-2 — DeborahK, Jan 24 '19 at 21:15
At the moment binding to `name` is not possible (though it is a feature request found here https://github.com/angular/angular/issues/12522), which leads to https://github.com/angular/angular/issues/17173 for interesting ideas/implementations on how to get around it. — Nathan Beck, Jan 25 '19 at 14:45
@NathanBeck thanks, the directive work around solves this problem . However now i ended up in a different problem , now since my router-outlets are dynamic (and are thus also named dynamically) the router-links poniting to this outlets also needs to be defined dynamically. In this case ` ` here value of `outlets` that is `"blogviewolet"` in this case also needs tobe pushed dynamically. if i try to assign it dynamically it again errors out with a a parsing error, is there a workaround for it. — Tarun Patel, Jan 25 '19 at 16:35
I'm going to post an answer with suggestions - I'd rather comment but it's hard to make sense of the code examples — Nathan Beck, Jan 25 '19 at 19:07

Nathan Beck · Accepted Answer · 2019-01-25T19:25:55.707

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>

This worked out with a small tweak : some points that i considered theoretically that manifested well : 1) `[routerLink]` accepts a JSON where the outlet- name is the json key and hence will never accept a plain string. 2) the way i solved it, without using conditional hardcoding is by using the dynamic data coming to the component to build a final string parse it as a json and assign it to the `"theOutletObject"` `this.theOletObj=JSON.parse('[{"outlets":{"'+this.olet+'":["'+this.link+'"]}}]');` and use it like ` {{linkstring}}` — Tarun Patel, Jan 26 '19 at 14:07

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

1 Answers1