Components
Builder

List

List — InputListType.List

<base-list>

One line per row, with an optional button or menu on the right. listRows[].label is a BaseTextConfig, not a string.

Project details

A plain list, one line per row.

Project: Kitchen remodel

Budget: $24,000 · $18,650 spent

Timeline: Oct 14 – Dec 20, 2026

Contractor: Rivera Construction

Contractors

Rows can end in a button or a menu. The last row is disabled.

Rivera Construction · general contractor

Bright Line Electric · panel upgrade

Summit Plumbing · rough-in done

Coastal Roofing · not hired yet

Bullets — Unordered / Ordered

<base-list>

Plain ul and ol variants, and one level of nesting through subList.

Shopping list

A bulleted list, with one nested level.

  • Exterior primer, 1 gallon

  • Paint

    • Siding: Harbor Gray, 3 gallons

    • Trim: Bright White, 1 gallon

  • Painter’s tape and drop cloths

  • 2½″ angled sash brush

Replace an outlet

Numbered steps, with nested details under a step.

  1. Turn off the breaker and test the outlet.

  2. Unscrew the cover plate and the old outlet.

  3. Move the wires to the new outlet:

    • Black (hot) to the brass screw

    • White (neutral) to the silver screw

    • Bare copper to the green ground screw

  4. Screw it in, add the plate and turn the breaker back on.

Selection — SelectionList

<mat-selection-list>

Selectable rows with toggles, multiple or single. selectChange reports only the row that changed, not the whole selection.

Fall maintenance checklist

Pick as many as you like. The roof inspection is locked.

Clean the gutters

Change the furnace filter

Test the smoke detectors

Blow out the sprinklers

Roof inspection (booked by the HOA)

Paint finish

Single choice, with the toggle after each option.

Flat — hides flaws, hard to clean

Eggshell — the usual pick for walls

Satin — kitchens and bathrooms

Semi-gloss — trim and doors

Field list — $listFieldData

<list-fields>

Label and value pairs, one per row or laid out in one row: a value can be a list, HTML, or come with an icon.

Project summary

Label and value pairs, one per row.

Project
Kitchen remodel
Status
In progress
Crew
Rivera Construction
Bright Line Electric
Summit Plumbing
Next step
Cabinets arrive Nov 3
Behind schedule
Countertops, 1 week
Costs

The same pairs laid out in one row.

Budget
$24,000
Spent
$18,650
Left
$5,350

Info item — $items

<list-info-item>

Titled blocks with an icon: a paragraph, a list of strings, HTML, tags and links. Items with a title but no body are skipped.

Replacing an outlet

Titled blocks with an icon: a paragraph, or a list of strings.

Before you start
Turn off power at the breaker and check the circuit with a voltage tester. Never trust the switch alone.
Tools
Voltage tester
Flat and Phillips screwdrivers
Wire strippers
Needle-nose pliers
Good to know

HTML text, tags and links.

Permits
Most cities need a permit for new circuits or a panel upgrade, but not for swapping an outlet.
Find your local building department
When to call a pro
Aluminum wiring, scorch marks, or a breaker that keeps tripping are jobs for a licensed electrician.

Use a row’s button or menu, or toggle an option, and it shows here.