Angular 10 ag-Grid Show Hide Columns

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 10 ag-Grid Show Hide Columns.

Post Working:

In post, I am showing you, how to show hide columns in ag-grid on button click in angular 10 application.

Angular 10 came. If you are new in Angular 10, then please check below links:

Angular 10 Basics Tutorials

Angular 10 for Beginners

Here are the more posts related to ag-Grid:

1. ag-Grid add new row
2. ag-Grid delete row
3. ag-Grid show hide columns
4. ag-Grid open modal popup on row click

Here are also some posts related to Angular ag-Grid:

Add ag-Grid in Angular application

Open Modal PopUp row click event on ag-Grid in Angular application

Now below is the code snippet for add new row ag-Grid:

1. Very first, you need to implement below tutorial link steps for adding ag-Grid into your angular 10 application:

Implement ag-Grid into Angular 10

2. Add below code into your app.component.ts file:

...
import { AgGridAngular } from "ag-grid-angular";

export class AppComponent {

....

  @ViewChild('agGrid') agGrid: AgGridAngular;
  
  HideModel()
	{
	  this.agGrid.columnApi.setColumnsVisible(['model'], false);
	  this.agGrid.api.sizeColumnsToFit();
 
	}
  ShowModel()
	{
	  this.agGrid.columnApi.setColumnsVisible(['model'], true);
	  this.agGrid.api.sizeColumnsToFit();
 
	}



}

3. Now add below code into your app.component.html file:

<button class="btn btn-success mr-2 mb-2"  (click)="ShowModel()">Show Model</button>
<button class="btn btn-warning mr-2 mb-2" (click)="HideModel()">Hide Model</button>
<ag-grid-angular
    style="height: 300px;" 
    class="ag-theme-balham-dark"
    [rowData]="rowData"
  #agGrid
    [columnDefs]="columnDefs"
    rowSelection="multiple"
    >
</ag-grid-angular>

This is it and if you have any kind of query then please comment below.

Note: First, you have to implement this https://therichpost.com/angular-9-10-ag-grid-working-example/ and after this you can get this post working easily:

Jassa

Thanks