Using Fluent UI Web Components in Angular

Fluent is an open-source design system. Depending on the used programming language and framework the developer can choose between different options like a React package, Fluent UI Web Components or Fluent UI Android to just name a few. For the use with Angular we can use Fluent UI Web Components. Fluent UI Web Components are based on Fast Design Web Components but styled with Fluent design. Web Components are reusable custom elements. They are based on the current web standards and can be used with any JavaScript library or framework as long as it works with HTML.

The first step for using Fluent UI inside the Angular project is to install the npm package:

npm install --save @fluentui/web-components

All required Fluent components need to be registered to the Fluent design system. This is done in the main.js of the Angular project.

The module decorator of the module containing web components needs to include the schema CUSTOM_ELEMENTS_SCHEMA.

Then the components can be used inside the HTML code, like normal HTML elements.

<fluent-button [disabled]=”disabled” appearance=”accent”>
  Click me.
</fluent-button>

Fluent UI Web Components and Angular Reactive Forms

When using Fluent components with Angular Reactive Forms it gets a bit more complex. The components are not native components, so they implement no ControlValueAccessor natively. For text fields it is sufficient to add the attribute ngDefaultControl to the html element.

<fluent-text-field
  ngDefaultControl
  placeholder="Placeholder"  
  formControlName="txt1">Labeltext</fluent-text-field>

Resulting Form Control

When it comes to select components for instance, the component needs to be wrapped to implement a ControlValueAccessor. There is a specific ControlValueAccessor which can be extended which is the SelectControlValueAccessor.

Resulting Form Control

Styling the Fluent Web Components

Variables are set for the styles. They can be used to change for instance the color of a button that it has as long as it is not interacted with

fluent-button {
  --accent-fill-rest: blue;
}

or different layout setting like the border width of a text box.

The Look and Feel of the Components

Microsoft provides a documentation where code snippets of the available web components are shown. Additionally, the website shows the rendered components and allows the users to interact with them.