ng-OfficeUIFabric: Angular Directives for Office UI Fabric

Advancing Office UI Fabric integration with Angular through community-driven projects, providing demos and references akin to Bootstrap's ease of use.

As I said in my last post, when the Office UI Fabric came out I immediately put in a feature request on the site for Angular directives the same way we have other design languages like Bootstrap & Google’s Material Design . There are projects that have created Angular directives for these design languages: UI Bootstrap & Angular Material . As you can see from the resolution of that issue, as well as from a dialog in a public Yammer network with the project owner at Microsoft, I took it upon myself to spin up a community project…

In my last post post, [Introducing - Demos and Reference Samples for the Office UI Fabric]( I talked about the new site I started to have a good publicly accessible and easy to reference the features and components within the Office UI Fabric.

I created it because before we create an Angular directive body of work, we first need something to base them on. How would we know what to measure success against? Sure, the Office UI Fabric has some docs, but we don’t have complete samples or a site where we can easily see how things work like you do with something like Bootstrap . Agreed?

While that project is ongoing, I wanted to let you know about something else:

ng-OfficeUIFabric: Angular Directives for Office UI Fabric


I’ve created a new org on GitHub, ngOfficeUIFabric that will contain the body of work for the Angular Office UI Fabric directives. The source for this project can be found in the repo ng-officeuifabric . I’ve added a bit of content to it but there’s a long way to go.

The goal is for this to become a high-quality library complete with documentation, samples, unit tests… all that stuff. Think Angular Material … I’ve got a site set aside for this, .

What Next?

Angular is well past the time of yet-another-web-framework. Angular is a core web technology these days that will be around for quite a while. Many companies are standardizing their internal web application development on this technology. In my eyes, the ng-OfficeUIFabric should be a reliable and high quality library… not something where we throw a few samples in that meet just your needs. We need reusable stuff.

Before I get start on it or we start adding community contributions, let’s get a few components demo’d out on the site first. Then we’ll create one or two Angular directives for them and the theming support, complete with unit tests and samples so contributors can see.

I’m really looking forward to getting the community involved and hopefully some support from Microsoft as well!

Andrew Connell
Developer & Chief Course Artisan, Voitanos LLC. | Microsoft MVP
Written by Andrew Connell

Andrew Connell is a web & cloud developer with a focus on Microsoft Azure & Microsoft 365. He’s received Microsoft’s MVP award every year since 2005 and has helped thousands of developers through the various courses he’s authored & taught. Andrew’s the founder of Voitanos and is dedicated to helping you be the best Microsoft 365 web & cloud developer. He lives with his wife & two kids in Florida.

Share & Comment