CODEWITHSUNDEEP
angularrouter-outlet
Mike
Mike

Reputation: 423

Angular use string as outlet name

I need to use string varible as outletname rr

this is my code:

  public redirect(): any {
    let rr = 'productModal';
    let rr2 = 'm/addProduct';
    return this.router.navigate(    
      ['link/link', {outlets: {rr: rr2}}]
    );
  }

Upvotes: 2

Views: 178

Answers (2)

Kushal Bajje
Kushal Bajje

Reputation: 121

If you want to give router outlet a name and to render components inside that outlet by using the router-outlet name, then the below solution works.

Step 1: Name the router-outlet tag using name attribute, In your case

  <router-outlet #outlet="outlet" name="rr"></router-outlet>

Step 2: Add the below code to that redirect button.

  [routerLink]="[{ outlets: {rr: ['m/addProduct']}} ]"

Step 3: in app-routing.module.ts file give the out-let name, In your case

        {path: 'm/addProduct',
        component: "Add product component",
        outlet: 'rr'}

The above solution worked for me.

Upvotes: 1

Johansrk
Johansrk

Reputation: 5250

 public redirect(): any {
    let rr = 'productModal';
    let rr2 = 'm/addProduct';
    return this.router.navigate(    
      ['link/link', {outlets: {[rr]: rr2}}]
    );
  }

Upvotes: 2

Related Questions