Recently, I've been exploring ways to hide an element specifically on tablet devices using the Angular ngx device detector service.
Although I have successfully achieved this through CSS media queries, I am curious to see if I can accomplish the same result using ngx device detector in my project.
Here is a snippet of the code:
<div id="hide-download">
<app-button name="download" classAttr="btn-primary" (click)="downloadFile()" [disabled]="!allOrders || allOrders.length === 0">
<i class="fas fa-download button-icon-padding"></i>
Download
</app-button>
In my Angular service file:
@Injectable()
export class ExampleDeviceDetectorService {
public deviceInfo: any;
public isMobile: any;
public isTablet: any;
public isDesktop: any;
constructor(
public deviceService: DeviceDetectorService
) {
this.getDeviceInfo();
}
getDeviceInfo() {
this.deviceInfo = this.deviceService.getDeviceInfo();
this.isMobile = this.deviceService.isMobile();
this.isTablet = this.deviceService.isTablet();
this.isDesktop = this.deviceService.isDesktop();
}
}
My intention was for the button to be hidden only on tablet devices.