NL Design System met Angular

Van bijna alle componenten in de NL Design System community is herbruikbare CSS beschikbaar. Voor Angular is een gedeelte beschikbaar als component. Dat betekent dat je niet meer zelf alle CSS class names hoeft te schrijven, en je code-editor autocomplete heeft voor diverse properties.

Componenten die nog niet voor Angular beschikbaar zijn, kun je waarschijnlijk relatief snel maken door gebruik te maken van de CSS die al wel bestaat.

We hebben extra aandacht besteed aan de formulier-componenten, zodat ze werken met Angular form bindings.

In Angular worden componenten vaak gerendered met een custom element als wrapper. Voor sommige componenten levert dit problemen op, bijvoorbeeld wanneer in HTML bepaalde elementen een directe parent-child-relatie moeten hebben. Denk aan: ol/li, table/tbody/tr/td, of fieldset/legend. We maken nu voor veel elementen gebruik van attribute selectors, om te voorkomen dat er een extra element wordt gemaakt. In de toekomst worden mogelijk bijna alle componenten beschikbaar via attribute selectors.

<table utrecht-table>
  <tbody utrecht-table-body>
    <tr utrecht-table-row>
      <td utrecht-table-cell>...

Bekijk de broncode op GitHub: nl-design-system/example-with-angular