Angular 10 ag-Grid show hide columns for multiple devices

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 10 ag-Grid show hide columns for multiple devices.

Post Working:

In this post, I will show you, how to hide ag-Grid columns for multiple devices and for checked the devices, I have used DeviceDetectorModule(ngx-device-detector) and it is very usefull.

Post made for:

One of my blog viewer had problem with ag-Grid show hide columns on mobile device and also he offered me money to do that code but I did not take money from him and I made it and now I am sharing this code to everyone.

Angular 10 came and if you are new then you must check below links:

Angular Basic Tutorials

Angular for Beginners

Here is the complete code snippet for Angular 10 ag-Grid show hide columns for multiple devices:

1. Very first you need to run below commands into your terminal to get fresh angular 10 setup:

npm install -g @angular/cli //Setup Angular10 atmosphere

ng new angular10grid //Install New Angular App

/**You need to update your Nodejs also for this verison**/

cd angular10grid //Go inside the Angular 10 Project

2. Now you need to run below code to install ag-grid, bootsrap module and device detector module into your angular 10 application:

I use bootstrap because layout looks good with that

npm install --save ag-grid-community ag-grid-angular

npm install bootstrap --save

npm i ngx-device-detector

3.  Now add below code into angular.json file to call the styles and scripts of added modules:

...
         "styles": [
              ...
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/ag-grid-community/dist/styles/ag-grid.css",
              "node_modules/ag-grid-community/dist/styles/ag-theme-balham-dark.min.css",
           ],
         "scripts": [
               ...
               "node_modules/bootstrap/dist/js/bootstrap.js",
            
            ]
...

4. Now add below code into src/app/app.module.ts file to declaration of added modules:

...
import { AgGridModule } from 'ag-grid-angular';
import { DeviceDetectorModule } from 'ngx-device-detector';

...
imports: [
...
AgGridModule.withComponents([]),
DeviceDetectorModule
]

5. Now add below code into src/app/app.component.ts file to run the main functionality:

...
import { DeviceDetectorService } from 'ngx-device-detector';
...


export class AppComponent {
...
constructor(private deviceService: DeviceDetectorService){
    //call the device check function
    this.therichpostFunction();
  }

//ag-Grid Data
columnDefs :any;
rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000, year:2020 },
    { make: 'Ford', model: 'Mondeo', price: 32000, year:2020 },
    { make: 'Porsche', model: 'Boxter', price: 72000, year:2020 }
];
therichpostFunction() {
  //will check mobile device  
  const isMobile = this.deviceService.isMobile();
  //will check desktop
  const isDesktopDevice = this.deviceService.isDesktop();
  
  //mobile true condition
  if(isMobile)
  {
    this.columnDefs = [
      {headerName: 'Make', field: 'make', sortable: true, filter: true },
      {headerName: 'Model', field: 'model', sortable: true, filter: true },
    ];
  }
  
  //desktop true condition
  if(isDesktopDevice)
  {
    this.columnDefs = [
      {headerName: 'Make', field: 'make', sortable: true, filter: true },
      {headerName: 'Model', field: 'model', sortable: true, filter: true },
      {headerName: 'Price', field: 'price', sortable: true, filter: true},
      {headerName: 'Year', field: 'year', sortable: true, filter: true}
    ];
  }
}
}

6. Finally here is the html code and you need to add into your src/app/app.component.html file to check the ag-Grid working on browser:

<div class="container mt-5 mb-5">
    <ag-grid-angular
        style="width: 805px; height: 300px;" 
        class="ag-theme-balham-dark"
        [rowData]="rowData"
        [columnDefs]="columnDefs"
     >
    </ag-grid-angular>
</div>

This is it and don’t forget to run ng serve command to check the working. If you have any kind of query then please do comment below.

With ngx-device-detector, we can also get the device info and here are some common functions to check the devices:

export class AppComponent {
    deviceInfo = null;
    ...
    constructor(private deviceService: DeviceDetectorService) {
      //call the function to get device info
       
      this.therichpostFunction();
    }
    ...
    therichpostFunction() {
      //Check the devices

      this.deviceInfo = this.deviceService.getDeviceInfo();
      const isMobile = this.deviceService.isMobile();
      const isTablet = this.deviceService.isTablet();
      const isDesktopDevice = this.deviceService.isDesktop();

      console.log(this.deviceInfo); // check device info
      console.log(isMobile);  // returns if the device is a mobile device (android / iPhone / windows-phone etc)
      console.log(isTablet);  // returns if the device us a tablet (iPad etc)
      console.log(isDesktopDevice); // returns if the app is running on a Desktop browser.
    }
    ...
  }

Jassa

Thanks