Saturday, April 20, 2024
ag-gridAngular 10Javascript

Angular 10 ag-Grid Show Hide Columns

Angular 9, Angular 10

Hello to all, welcome to 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

Working demo video that I have made few months ago.

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;
	  this.agGrid.columnApi.setColumnsVisible(['model'], false);
	  this.agGrid.columnApi.setColumnsVisible(['model'], true);


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>
    style="height: 300px;" 

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

Note: First, you have to implement this and after this you can get this post working easily:



the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.


Leave a Reply

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