ngOfficeUiFabric v0.11.0 Released - Sharing a New Directive


Today we released v0.11.0 of the ngOfficeUiFabric library. This release includes a new directive, multiple fixes, updates to Office UI Fabric 2.6.1 and updates to our tooling, bringing us to a total of thirty (30) directives… we’re just one short of what is in the Office UI Fabric!

  • Implementation of the message bar; by @andikrueger
  • breaking change to how we add links, makes it more dynamic & responsive
  • updated our build process to use version 1.x of Typings, the replacement for TypeScript’s TSD utility to manage type definitions You can grab the latest version from npm, bower nuget or using CDNJS…

npm bower nuget

You can read the release notes for v0.11.0 in our repo:

At this point we are at 94% complete with our v1.0.0 release milestone which is full parity coverage where we have a directive for every Office UI Fabric component!

What’s left to do?

We have one component we want to get implemented, Facepile and then we need to address two or three issues and we can finally call it a 1.0 release. We are also working on a better documentation & demo site as for now, it hasn’t been a top priority. This is a personal task for me, one I want to make very impressive. The idea is to make it more automated with each build than what we presently have. It won’t hold us up from doing a v1.0 release, but it’s something we really need.

What about Angular 2?

We do plan to build another version of the library for Angular 2 which should be GA any day now (it’s currently in the RC phase). The Angular Material team has been doing a lot of work in this area and we plan to leverage some of their process. For instance, there was talk about a whole test harness system they were building to do screenshot diffs as part of the build & testing process. This could be used by other libraries, like ours, so we are letting them lead the way for now… but rest assured… it’s in the plan!

What is ngOfficeUiFabric?

This is a collection of directives that implement the Office UI Fabric components with no script dependencies except for Angular. The aim is to make it easier to use the components in fabric within Angular applications. You don’t have to know all the CSS classes that Fabric uses or exactly how the HTML should line up, the directives do that for you. In addition, because it’s more than just CSS, we will have useful functionality in our directives. For instance, ultimately the table will provide sortable columns! There are other design libraries out there you can use to build your Angular applications for Office products, such as Angular Material and [UI Bootstrap]( which are fantastic options, but why not use the same design language that the hosting application (Office clients / Office 365 / SharePoint) uses?

How Can I See Them in Action?

We have plans for a full-blown demo site in the future, but the idea was to get a handful of directives built first so we have something to work with. That demo site will live at Today each directive in the main source repo contains a few usage demos where you can see how they work. I took these demos and put them in a spot where you can easily see them working without any extra work. For now if you go to you can see each directive in action. However you can also build the library yourself. Jump to the section on How Can I Get Involved below to see how this is done.

How Can I Get Involved?

Interested in picking up a directive and contributing? Fantastic! First, I’d get a copy of the project locally, build & test it. Poke around and see if things are familiar to you to see how we do things. For the geeky / code questions, here’s a high-level overview of the project:

  • All directives are authored in TypeScript that is transpiled to JavaScript.
  • We are using the external module pattern in TypeScript to define the directives (no namespaces / internal modules).
  • All code is vetted against defined rules using TSLINT.
  • Module loading in the browser by employing webpack which does all bundling & dependency loading of the modules. There’s nothing for developers to do here… everything is already set up. If you need a module, you simply import it into your existing module and webpack handles loading it for you.
  • All directives must have associated unit tests and a [high level of code coverage]( (today over 97% of all lines are tested).
  • When pull requests are submitted we have an automated build process that kicks off via CircleCI that builds the library, runs all tests & other checks. If something fails, it’s on the developer who’s submitting the pull request to fix it before we consider it.
  • Eventually we’ll have an automated release process where each time someone adds a new directive, we’ll increment automatically build a new version & publish a release.

Minimal Path to Awesome

Want to see it in action? We have a Minimal Path to Awesome doc that walks you through getting the code, installing the dependencies (there are only two: TypeScript & TSD) transpiling the code, vetting all the code for style conformity, run all unit tests, view the code coverage reports, building the library & viewing the working demos… all from the source code in the main repo.

Feeling adventurous?

Give it a shot! Interested in helping out? Check out the CONTRIBUTING guide to see our guidelines then check out our issues list to see what directives haven’t been claimed and express interest in one!

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