Wouldn’t it be great if we could combine Angular forms and ag-Grid? This article documents how.

ag-Grid is The Best Javascript Grid in The World.

Angular Forms are a great way to encompass a logic unit of data — something you can submit to the backend for further processing, saving etc.

Wouldn’t it be great if we could combine angular forms and ag-Grid? And better yet, wouldn’t it be great if we could treat grid cells as part of the wider form?

It would! This article documents how you can integrate these two great technologies.

The Use Case

ag-Grid is a feature rich grid with a huge amount of functionality — documenting what can be done with it would be a series of articles in it’s own right. …


Image for post
Image for post

This article is based on a talk I gave at ngVikings in March 2018 called “Visualising Enterprise Data with Angular and D3”. You watch the full talk on YouTube. The application demonstrated can be found on GitHub.


In Part 4 of this Series hook up the front end all the way down to the database, including support for all CRUD operations (create, read, update and deletion).

Series Chapters

  • Part 1: Introduction & Initial Setup: Maven, Spring and JPA/Backend (Database)
  • Part 2: Middle Tier: Exposing our data with a REST Service
  • Part 3: Front End — Initial Implementation
  • Part 4: Front End — Grid Features & CRUD (Creation, Reads, Updates and Deletion)

Introduction

While writing this part of the blog I uncovered two bugs in work done so far.

If you’ve been following this series so far please take a quick look at both parts 1 and 2 to see the changes made (look for Updated!). …


In Part 3 of this Series, we create the scaffolding for our Angular application and get our data displayed in our first, simple, grid.

Image for post
Image for post

Series Chapters

  • Part 1: Introduction & Initial Setup: Maven, Spring and JPA/Backend (Database)
  • Part 2: Middle Tier: Exposing our data with a REST Service
  • Part 3: Front End — Initial Implementation
  • Part 4: Front End — Grid Features & CRUD (Creation, Updates and Deletion)

Introduction

The completed code for this blog series can be found here (once the series is complete), with this particular section being under Part 3

In order for our data to be useful we need to make it available to users. So far we’ve exposed our data via REST service in the previous part, but now let’s make it available to our users in the browser. …


Image for post
Image for post

In Part 2 of this Series, we go into more detail into the Middle Tier, exposing our data via a REST service.

Series Chapters

  • Part 1: Introduction & Initial Setup: Maven, Spring and JPA/Backend (Database)
  • Part 2: Middle Tier: Exposing our data with a REST Service
  • Part 3: Front End — Initial Implementation
  • Part 4: Front End — Grid Features & CRUD (Creation, Updates and Deletion)

Introduction

The completed code for this blog series can be found here (once the series is complete), with this particular section being under Part 2

One part of this entry of the series have been updated as the result of a bug I found later on. …


One of the most common scenarios in an Enterprise application is the Creation, Retrieval, Updating and Deletion (CRUD!) of records in some backend somewhere.

Although there are many ways to implement the backend in a system like this, I describe a simple setup here. The idea is that I want to convey how simple this can be. Once you’re happy with the overall concepts it should be a trivial exercise to swap out the backend for your preferred one. You will then be able to maintain and reuse most of the middle and front tiers of the application described.

Series Chapters

  • Part 1: Introduction & Initial Setup: Maven, Spring and JPA/Backend…

Image for post
Image for post

ag-Grid is The Best Grid in the world! React is one of the best frameworks in the world! Redux and React were made for each other. This blog goes through how to use all three of these frameworks together for a brilliant developer experience!

A live working example of ag-Grid with React and Redux can be found here.

Introduction

React is a great framework offering a powerful but simple way to write your applications. Redux offers a great way to decouple your Component state while making it easier to keep your data immutable.

ag-Grid is not written in React — this makes ag-Grid both powerful and flexible in that we can support all major frameworks. ag-Grid can also work with immutable stores, so although ag-Grid doesn’t use Redux internally, it is fully able to work with your React / Redux application seamlessly. …


Image for post
Image for post
ag-Grid | ngtools/Webpack

AOT is a big part of using Angular. I’ve used Angular CLI successfully here at ag-Grid to build applications with AOT and found it very easy to use, but sometimes you need more control and fine tuning, and sometimes you just need an alternative, so in this blog I go through how to use ngtools/webpack, as well as describing the benefits in generally of using Webpack & AOT.

It might be useful to go through an earlier blog I wrote on Understanding Webpack for a tutorial on Webpack core concepts and ideas. …


Image for post
Image for post
ag-Grid | VueJS

VueJS is a fantastic framework that has experienced amazing growth since it was first released in early 2014. We here at ag-Grid are proud to be able to announce support for VueJS, offering native support of VueJS components within the grid itself.

We’ll walk through creating a simple VueJS application with ag-Grid at its core, using VueJS components to add dynamic functionality to the experience, making good use of what both VueJS and ag-Grid offers us.

Munros?


Git is great. Git was a breath of fresh air for those of use who came from a background of SVN, Perforce, ClearCase or…*shudder*, CVS.

We at ag-Grid love open-source, and our VCS of choice is Git, with Github our choice of host.

Although I live most of my time in my IDE (IntelliJ FTW!) when it comes to version control I almost always drop down to the command line. The support for Git in most IDEs is great — it’s more of a personal preference.

I can script common tasks from the command line (although of course you could execute these script from the IDE), and don’t have to worry about synchronizing the IDE to the state of the file system (a rare problem to be fair). What the command line tells me is the truth — if I want to know what the state my project is git status tells me, in a quick to parse information dump. …

About

Sean Landsman

Lead Developer — Frameworks. Responsible for integrating all of ag-Grid’s supported frameworks (Angular, Vue, React etc)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store