Page Comparison

Button

Knap

Button

• The standard Angular button can be used together with the FDS CSS class out-of-the-box.

Card

Card

Card

• The FDS and Angular markup differs quite a bit.

Alert

Besked

N/A

• Angular does not have a standalone stand-alone component for in-line alert/messages.

Table

Tabel

Table

• The Angular table only needs a few changes to work with FDS. However, the arrows for sorting have to be changed to FDS.

Snackbar

Toastbesked

Snackbar

• While the FDS toastbesked and the Angular snack snackbar are both a pop-up information notification, they differ a lot from each other.

Structured list

Struktureret liste

List

• Do note that the FDS list makes use of the FDS flexbox grid.

Header

Header

N/A

• As a header is not a component it is not provided in the Angular framework. However FDS has specific markup and CSS for headers.

Footer

Footer

N/A

• As a footer is not a component it is not provided in the Angular framework. However FDS has specific markup and CSS for footers.

Stepper (vertical)

Trinindikator

Stepper

• It is important that the stepper is vertical and not horizontal, in order to follow the FDS guidelines.

Status label

Badge

N/A

• While Angular contains a badge component, it is not the same kind of badge as the FDS badebadge.

Validation error

Fejlmeddelse

Input validation

• Angular’s input errors are already part of components with input validation.

Popup

Modal

Dialog

• Be very mindful of the FDS modal guidelines (retningslinjer) when creating modals.

Tooltip

Tooltip

Tooltip

• Note that the FDS tooltip also has a hidden screen reader attribute.

Paginator

Paginering

Paginator

• If the Angular paginator component is used, then it is important that aria labels and screen reader attributes from FDS are included.

Back-to-top

Tilbage til toppen

N/A

• This element can just be a simple fixed button, but it is important that the FDS guidelines are followed.

Tabs

Faneblade

Tabs

• Be mindful of the HTML attributes that FDS uses.

Loading spinner

Loading spinner

Progress spinner

• The FDS loading spinner comes with no functionality and barely any markup, so the Angular progress spinner can be used instead, as long as the FDS CSS is included.

Search bar

Søgefelt

Search filter

• Angular does not of a standalone search bar, but it incorporates search as a filter for some components, such as the table component.

Input field

Input felt

Input

• The FDS “Hjælpetekst” (helptext) functionality is important.

Dropdown

Dropdown

Select

• The FDS and Angular markup for dropdown/select is fairly close to each other.

Date field

Datofelt

N/A

• Angular does not have a specific component for day, month, and year input. Instead three standard input fields can be used.

Datepicker

Datovælger

Datepicker

• The visual functionality of the FDS and Angular datepicker are very close, but their markup are very different which can cause the FDS CSS to fail.

Checkbox

Tjekboks

Checkbox

• The FDS JavaSript is most likely only important if hidden fields are needed.

Grid layout

Grid

Grid list

• Both FDS and Angular is based on flexbox.

• It’s important to use the margin and padding from FDS.