angularrouteroutletangular4-router

Angular 4 router-outlets

I am quite new in Angular 4. I am trying to use router outlet to create dynamic content unfortunately, I am not able to use it twice, because I have different scenarios for tablets, mobiles and desktops. Maybe do you guys have some advise?

I think I can assign different outlets but maybe there is an easier way?

My code:

<div class="ui two column stackable grid">

    <app-navigation class="three wide column computer mobile only webso-navigation"></app-navigation>
    <app-navigation class="four wide column tablet only webso-navigation"></app-navigation>
    <div class="thirteen wide column computer mobile only webso-content">
        <router-outlet></router-outlet>
    </div>
    <div class="twelve wide column tablet only webso-content">
        <router-outlet></router-outlet>
    </div> 



</div>

Thank you for your help.

Solution

  • For your case, there is no need of two <router-outlet></router-outlet>

    You can simply achieve this by using ngClass

    // In Component File
isMobile : boolean;
isTablet : boolean;

// In Template File
<div [ngClass]="{'thirteen wide column computer mobile only webso-content' : isMobile , 
                'twelve wide column tablet only webso-content' : isTablet }" >
        <router-outlet></router-outlet>
</div>

    But if you still want to use multiple router-outlet ,

    Checkout the link as @Skeptor suggested in comment http://onehungrymind.com/named-router-outlets-in-angular-2/