Skip to content

pravin02/dynamic-table-header-row

Repository files navigation

DynamicTable

This project was generated with Angular CLI version 7.2.1.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Dynamic table column and row binding

Below table bind the details dynamically accordingly JSON received from server

Description: The below list-component receives data from API using service and checks the received data is null or undefined if it is it will display error message on screen otherwise retrive first indexed object and scan for keys of json to bind on th tag. Hint: Object.keys(object); Row Binding: To bind the values on rows we have to use nestate loop as,

  1. Loop for revceived json and
  2. For keys
{{key | titlecase}}
{{user[key]}}
  1. http://localhost:4200/assets/api/list1.json alt text

  2. http://localhost:4200/assets/api/list2.json alt text

  3. http://localhost:4200/assets/api/list3.json alt text

  4. http://localhost:4200/assets/api/list4.json No record found alt text

About

Dynamic table column and row binding

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published