Friday, September 25, 2020
therichposts@gmail.com
ag-gridAngular 10Bootstrap 4.5Javascript

Angular 10 ag-Grid show hide columns for multiple devices

Angular 9, Angular 10

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

Angular ag-Grid show hide columns on 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

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.