Angular 4 router-outlets

Question

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.

may be you can try 'named router outlet'. http://onehungrymind.com/named-router-outlets-in-angular-2/ — Vamshi, Oct 03 '17 at 01:25
use named routes - `{ path: 'compose', component: ComposeMessageComponent, outlet: 'popup' },` , `Contact` , `` https://angular.io/guide/router — Gary, Oct 03 '17 at 02:00

score 0 · Accepted Answer · answered Oct 03 '17 at 04:30

0

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/

answered Oct 03 '17 at 04:30

Vivek Doshi

56,649
12
110
122

But somehow I should check the viewport / resolution? To assign boolean values for isMobile || isTablet – user2149578 Oct 03 '17 at 08:15
@user2149578 , there are so many libs out there for device recognition, check this out https://stackoverflow.com/questions/21757105/javascript-how-to-check-user-agent-for-mobile-tablet – Vivek Doshi Oct 03 '17 at 12:39

score 0 · Answer 2 · answered Oct 03 '17 at 08:52

Solved:

App.component.ts

export class AppComponent implements OnInit {


  title = 'app';
  innerWidth;

  isTablet : boolean = false;


  ngOnInit() {
    this.innerWidth = window.innerWidth;

    this.innerWidth <= 600 || this.innerWidth >= 1024 ? this.isTablet = false : this.isTablet = true;
  }

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.innerWidth = window.innerWidth;

    this.innerWidth <= 600 || this.innerWidth >= 1024 ? this.isTablet = false : this.isTablet = true;

  }

App.component.html

<div [ngClass]="isTablet ? 'twelve wide column tablet only webso-content'
                                : 'thirteen wide column computer mobile only webso-content'">
        <router-outlet></router-outlet>
    </div>

Angular 4 router-outlets

2 Answers2