Angular HTTP Tutorial: Angular Grid/Material Table with JSON & REST API

This Angular HTTP tutorial will guide you step by step on how to use HTTP with a cloud-based REST Endpoint to bind JSON data to an Angular UI Grid. You're going to see how to create an Angular HTTP service that uses the Angular HTTP client that goes off to the Cloud, gets JSON data and then binds it into the Angular grid. In the previous video in this series - Angular CLI Tutorial - you learned how to build a full-featured Angular Grid with Ignite UI for Angular Schematics & Templates that can be used in any business application. So, in case you missed it, click on the link below to watch the tutorial and get detailed information and demo.

Angular CLI Tutorial: Building Angular Grid with Angular Schematics & Templates:

Angular HTTP Tutorial Chapters:

0:00 Intro
2:07 Create Service Class for HTTP End Point
5:30 Add HTTP Service Endpoint from the Cloud in New Data Service
6:36 Use New HTTP Data Service Class with JSON in Grid Component Class
9:15 Swap Local Data with Angular HTTP Service with Cloud JSON using REST API
10:33 Wrap up

If you also need fast Angular Data Grids, Infragistics’ Angular UI Grid component can handle unlimited Angular Table rows and columns of data, while providing access to custom templates and real-time data updates. Featuring an intuitive API for easy theming and branding, you can quickly bind to data with minimal code. Some of the features are cell and row selection, cell and row editing, error validation, column summaries, interactive Outlook-style grouping, Microsoft Excel-style filtering, virtualized rows and columns.

Learn more about the low-code App Builder™ software

Create everything you learned about in this video in a WYSIWYG Low-Code App Builder! It is a brand-new cloud-based WYSIWYG low-code development platform and drag-and-drop app builder with a toolbox of 60+ UI controls. Usingour app maker, you can start your business app from scratch or choose from a library of pre-built app templates or responsive screen layouts. The unique differentiator between App Builder and other low-code tools on the market is the production-ready code that comes with any Angular app (or Blazor app) built with our app maker, the instant real-time preview of your app and code, and the ability to download your project as a zip file or publish it on GitHub.

What is REST?

REST, or REpresentational State Transfer, is an architectural style for providing standards between computer systems on the web, making it easier for systems to communicate with each other. REST-compliant systems, often called RESTful systems, are characterized by how they are stateless and separate the concerns of client and server. By using a REST interface, different clients hit the same REST endpoints, perform the same actions, and receive the same responses. In modern web applications, like Angular, REST is used to get from the server to the Angular HTTP client. The transport format is usually JSON, but it can bet anything.

[neelampallinaveen]

Hi sir i had a query regarding igniteui if licensed one example i have ppackage of ignite ui how we can add it existing angular project

[jacobahmed]

Great stuff man thanks, I similar app but we are using Mat table, our JSON have spaces in the objects names like " user name", I have interface created to match the JSON data but cannot get HTML to read form it.