Premium

Angular Dynamic Table (Rows × Columns)

By FrontendAtlas Editorial · Updated Jul 15, 2026

Challenge summary

Given user input for the number of rows and columns, render a table grid dynamically. Use an Angular standalone component with form bindings and @for loops to generate the table structure.

What you'll practice

  • Use a standalone Angular component as the root component.
  • Provide two numeric inputs: one for the number of rows and one for the number of columns.
  • Provide a button (e.g. "Generate table" or "Update") that rebuilds the table when clicked.
  • Render an HTML table whose number of rows and columns matches the user-input values.
  • Initially, no table or an empty grid is fine, as long as it appears correctly after the first generate action.

What Premium unlocks

Premium unlocks the runnable workspace, behavioral checks, implementation walkthrough, and edge-case discussion.

Free related practice

Upgrade to FrontendAtlas Premium to unlock this challenge. Already upgraded? Sign in to continue.