Remove click function on mobile using Angular

Question

I have a navigation and when you click on a certain link, it takes you to a different webpage. here is my code:

<ul class="nav-list">
    <li class="mobile-homepage"><a (click)="selectPage('homepage')">{{'NAVIGATION_HOMEPAGE'|translate}}</a></li>
    <li><a (click)="selectPage('solutions')" class="main-links separate">{{'NAVIGATION_SOLUTIONS'|translate}}</a>
        <ul class="nav-dropdown set-width">
            <li><a (click)="selectPage('solutions', 'collect')" >{{'NAVIGATION_CLICK_COLLECT'|translate}}</a></li>
            <li><a (click)="selectPage('solutions', 'returns')">{{'NAVIGATION_STORE_RETURNS'|translate}}</a></li>
            <li><a (click)="selectPage('solutions', 'aisle')" >{{'NAVIGATION_ENDLESS_AISLE'|translate}}</a></li>
            <li><a (click)="selectPage('solutions', 'store')" >{{'NAVIGATION_STORE_FULFILMENT'|translate}}</a></li>
            <li><a (click)="selectPage('solutions', 'customer')" >{{'NAVIGATION_CUSTOMER_CARE'|translate}}</a></li>
            <li><a (click)="selectPage('solutions', 'partner')" >{{'NAVIGATION_PARTNER_FULFILMENT'|translate}}</a></li>
        </ul>
    </li>
</ul>

You can see the click event on the second li, (click)="selectPage('solutions') My issue is, I want to disable that link while on mobile. It opens to a drop down menu as well so I don't want to completely disable it, I just want it so that on mobile, when you click that link, only the dropdown menu opens and it doesn't take you to a new page like on desktop.

Does anyone know how I could do this using jQuery?

You can check the answer of [this question](https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery/34213858). — VTodorov, Nov 03 '17 at 07:02
You can hide it with CSS: @media only screen and (max-device-width : 640px) { .hide-on-mobile { display: none; } } — abhijeetwebdev, Nov 03 '17 at 07:08
I don't want to hide the entire thing though. i only want to disable (click)="selectPage('solutions') — KatherineMichelle, Nov 03 '17 at 07:59

score 0 · Answer 1 · answered Nov 03 '17 at 07:36

The easy solution is to duplicate the links and have them display or not with CSS via media queries.

<li class="desktop"><a (click)="selectPage('solutions', 'collect')" >
<li class="mobile"><a (click)="selectMobilePage('solutions', 'collect')" >

An other solution would be to check the screen size inside the selectPage function:

if(window.innerWidth >= xxx) { ... }

The better solution is to create a service that will listen to resize events and return a boolean whether on mobile or not.

Pseudo code:

@Injectable()
export class ScreenService {

  public resize$;

  constructor() {
    this.resize$ = new BehaviorSubject<null>(null);
    Observable.fromEvent(window, 'resize').subscribe(() => this.onResize());
  }

  private onResize() {
    this.setSize();
    this.resize$.next();
  }

  private setSize() {
    this.screenHeight = window.innerHeight;
    this.screenWidth = window.innerWidth;
  }

  isMobile() {
    return this.screenWidth >= xxx; // your choice
  }

}

score 0 · Answer 2 · answered Nov 03 '17 at 07:58

You could use this or a similar lib (ive seen another around cant recall the name atm) https://www.npmjs.com/package/ng2-device-detector

This will let you check if a user is on mobile or whatever other device.

Or you could do what I did with a similar issue, use flexbox to detect screen width and adjust accordingly like so:

<mat-toolbar class="fixed-navbar mat-elevation-z6" color="accent">

      <button mat-button (click)="sidenav.open()" fxHide="false" fxHide.gt-lg>
        <mat-icon>menu</mat-icon>
      </button>
      <div fxLayout>
        <button mat-button routerLink="/"><div class="title">{{title}}</div></button>
      </div>

      <div fxFlex="grow"></div>
      <div style="padding-right: 20px;">
        <div fxLayout fxShow="false" fxShow.gt-lg>
          <button mat-button [mat-menu-trigger-for]="infoMenu"><span>Information</span></button>
          <button mat-button [mat-menu-trigger-for]="toolsMenu"><span>Tools</span></button>
          <button mat-button [mat-menu-trigger-for]="userMenu"><span>User</span></button>
          <button mat-icon-button [mat-menu-trigger-for]="colors"><mat-icon>format_color_fill</mat-icon></button>
        </div>
      </div>
    </mat-toolbar>

To see this properly you can look here:

https://github.com/kenji-1996/CallumTech/blob/master/src/app/component/navbar/navbar.component.html

Remove click function on mobile using Angular

2 Answers2