Angular: detecting mobile status within template

Question

Angular: detecting mobile status within template

Often in my templates, I find myself repeating this type of code:

<custom-button [align]="isMobile() ? 'center' : 'left'"></custom-button>

This also requires me to include a method in each component to determine whether it is mobile or not:

  isMobile() {
    return Util.isMobile();
  }

It seems redundant to have this method in every component, but I haven't been able to find a simpler solution. While it could theoretically be achieved with CSS, in certain cases like the one presented, the alignment needs vary and cannot be controlled through external styling due to being nested within another component.

Any ideas on how to better address this issue?

angular typescript

Answer 1

Answer №1

If you want to enhance the functionality of your component, consider converting it into a directive. I previously implemented something similar with the utilization of Angular Material CDK.

Although I can't guarantee that this solution will perfectly suit your specific requirements, it could serve as a valuable starting point:

import { Directive, ElementRef, Renderer2, OnInit } from '@angular/core';
import { Utility } from './util-file-path';

@Directive({
  selector: '[appCustomAlign]'
})
export class CustomAlignmentDirective implements OnInit {

  constructor(private elementRef: ElementRef, private renderer: Renderer2) {}

  ngOnInit() {
    const alignment = Utility.checkIfMobile() ? 'center' : 'left';

    //assuming this is for flex layout
    this.renderer.setStyle(this.elementRef.nativeElement, 'justify-content', alignment);
  }
}

Answer 2

If you want to enhance the functionality of your component, consider converting it into a directive. I previously implemented something similar with the utilization of Angular Material CDK.

Although I can't guarantee that this solution will perfectly suit your specific requirements, it could serve as a valuable starting point:

import { Directive, ElementRef, Renderer2, OnInit } from '@angular/core';
import { Utility } from './util-file-path';

@Directive({
  selector: '[appCustomAlign]'
})
export class CustomAlignmentDirective implements OnInit {

  constructor(private elementRef: ElementRef, private renderer: Renderer2) {}

  ngOnInit() {
    const alignment = Utility.checkIfMobile() ? 'center' : 'left';

    //assuming this is for flex layout
    this.renderer.setStyle(this.elementRef.nativeElement, 'justify-content', alignment);
  }
}

Angular: detecting mobile status within template

Answer №1

Similar questions

The Angular 2 HTTP GET method is throwing a type 3 error when trying to access the

Proper method for determining return type through the use of `infer`

Is there a way to prevent the expansion of "--base-href" to an absolute path during the npm build process?

Pass data between different parts of the system

What is the proper way to add a string to a TypeScript array?

The connection to Firebase is being refused when attempting to use the http.post method in Ionic

I'm encountering an issue with my Next.js development server at localhost:3001 where all routes are displaying a 404 not found page. What

While using Angular CLI on GitLab CI, an error occurred indicating that the custom rule directory "codelyzer" could not be

A more concise validation function for mandatory fields

Guide on showing a dropdown menu depending on the data in the current array index within a table

Design an interactive listbox with both HTML and Angular that allows for multiple selections

Ensure that all content is completely loaded before displaying it using Angular 2

Unable to access the correct item from local storage while a user is authenticated

When using the RxJs Pipe with MAP in Angular and Ionic, it may not return a value in windows, but it works perfectly in Mac when used with HttpClient

Angular 2 does not update the variable value within a dataservice call on the page until you navigate away from the page and then come back to it

Utilize generics to define the data type of the output

What causes the "Method Not Allowed" error while trying to restore the package.json package in VS2015?

Incorporating Java project dependencies into an npm project

Choose from the Angular enum options

Encountered an issue with Angular Material sidenav: The synthetic listener @transform.start was found