During the past week the ngOfficeUiFabric got my full attention. I was working on a customer project using this awesome feature-rich Angular implementation of Office UI Fabric and had some issues with the disable-attribute for inputs and buttons.

What is ngOfficeUiFabric?

ngOfficeUiFabric are Angular directives for Office Ui Fabric. Last year, ngOfficeUiFabric was initiated by Andrew Connell who put up a github project and the respective community. By now version 0.10.0 is out and the ngOfficeUiFabric is close to reach feature parity with every Office UI Farbic component.

ngOfficeUiFabric offers more than the sole styling of Office Ui Fabric components. It offers a native Angular feature set and even more functionality than the Office Ui Fabric.

Get more detailed information! Waldek Mastykarz wrote a great article about the table functions of ngOfficeUiFabric offers: Build Angular applications with style – the table component (ngOfficeUIFabric)

What makes the ngOfficeUiFabric so awesome?

Have you ever tried to implement one of the Office UI Fabric buttons? I did and had a hard time with it.

<button class="ms-Button">
<span class="ms-Button-label">Create account</span>
</button>

That’s a lot of code and formatting for a button. With ngOfficeUiFabric the lines of codes are way shorter and simpler:

<uif-button uif-type="primary">
Click Me!
</uif-button>

With ngOfficeUiFabric there is no need to worry about the Office Ui Fabric classes and markup. You are ready to go with that tiny markup.

In addition you can use your Angular controllers as usual.

Let’s have a look at the textfield directive:

<uif-textfield ng-model="vm.textValue" placeholder="vm.placeholder" uif-description="vm.description" uif-Multiline="vm.multiLineSwitch" />

These lines of code render either an input or a textfield with the placeholder, textvalue and description defined in your view model. This makes it very easy if you are creating large forms with Angular.

ngOfficeUiFabric has a site with some demos: http://ngofficeuifabric.com/demos/. They give you a good overview over the several components. Even more demos are available in the src/components folder in the github repo of this project. Check it out: here