@fabric-msft/fluent-angular

Angular Wrappers for Fluent UI web components

The Fabric UX System represents a leap forward in design consistency and extensibility for Microsoft Fabric. Developed by the Fabric UX Team, this system is a collection of design guidance, common patterns, and reusable components created to empower designers and developers to build consistent, accessible, and engaging workload experiences across Fabric surfaces.

View the Fabric UX System documentation.

@fabric-msft/fluent-angular is a collection of lightweight Angular wrappers around Fluent web components. Each Angular component corresponds to a web component of the same name.

These Angular components accept the same inputs as the corresponding web components and pass these inputs directly to the HTML attributes of the web components. Additionally, the ComponentModules automatically register the web components with the browser’s customElements, allowing the web components to be used in your Angular application with a single import and no additional configuration.

Installation

npm

yarn add -D @fabric-msft/fluent-angular

Yarn

yarn add -D @fabric-msft/fluent-angular

Usage

Import the component into your Angular project's root module file and use it as you would any Angular component:

import { BadgeWrapperModule } from "@fluent-msft/fluent-angular";

@NgModule({
  imports: [BadgeWrapperModule]
})

// Use the component selector in your template
<fluent-badge shape="rounded" size="large" color="danger"></fluent-badge>

Applying styles

Also available from Angular Fluent Components are the methods required for enabling styles and themes. In the root of your application, styling can be enabled like this:

import { fabricLightTheme, setTheme } from "@fabric-msft/theme";

setTheme(fabricLightTheme);