Angular Elements – the future of ngOfficeUiFabric

Vesa Juvonen gave a great keynote at the European SharePoint Conference in Dublin on Thursday last week . It was filled with many announcements supported by a fantastic speaker line up. The biggest news were about SPFx and ALM in SharePoint Online.

Keynote by Vesa Juvonen and Rob Wormald about Angular Elements in SPFx WebParts

The moment Rob Wormald from the Angular Team joined Vesa – very unexpected for a conference focused on Microsoft technology – great developments were inntroduced: Angular Elements.

Angular – A google project – is widely used in modern web development and currently there are no best practices available for using Angular in SPFx webparts. Currently the best option is: avoid using Angular in SPFx right now.

What are Angular Elements?

It’s Angular Components as web components. Web components can be used in SharePoint Modern Sites and any other JavaScript apps. The new elements will blend in every other framework.

This makes Angular Elements way more versatile in usage and handling in combination with other Frameworks like e.g. React.

The dependency on the virtual DOM and the way SPFx webparts go through a process of packaging, made the usage of Angular in SPFx webparts not attractive. If you were still going with Angular, there are very likely chances you will run into troubles or performance issues, when you try to insert more than one of your Angular SPFx webparts.

The biggest step with Angular Elements comes with: “How can it be used in a page?” The dependency on a root element becomes obsolete! This means Angular Elements is just plain JavaScript without any further dependencies after the step of compilation. This makes Angular Elements a valuable option in SPFx.

Whats the effect of this new Angular Elements for ngOfficeUiFabric?

In case you haven’t seen Andrew’s post: HERE! I think Andrew is one of the few people who can explain this difficult topic in an understandable easy way!
There are plans to start of with Angular Elements for ngOfficeUiFabric. I hope this ngOfficeUiFabric@Next project will start to fly soon.


Sharing is caring – a good example

During the last month I was building a new web application with an extensive user interface. There were no requirements focusing on the design. This decision was up to me. What now? I did not want to start from scratch.

I had used the Office UI Fabric in other projects before and was thrilled to get my hands dirty with the ngOfficeUIFabric Angular directives. I started with a simple form which implements few inputs. As the project grew more complex more input fields were needed. By now nearly each directive is in use.

Complex projects are the best test cases for new implementations. With that in mind I wasn’t surprised to find some issues with the ngOfficeUIFabric.

I started to address these issues at the github repo of the ngOfficeUIFabric project and was able to fix some of them myself. By now all of the initial issues I had are fixed.

Mikael Svenson experienced an issue with the uif-textfield directive in multiline mode. In my project the uif-textfield is by far the most popular one. When I saw Mikael’s issue I was glad to help, as I contributed on this directive before. In less than 24 hours the initial issue got resolved. Check out Mikael’s blog about the the awesome community.

After years of consumption, I am very glad to finally being able to contribute to this awesome community as well.


ngOfficeUIFabric – the messagebar component

The message bar is a new Office UI Fabric component, which is part of Office UI Fabric 2.6.1.

The default message bar component

You can use the message bar to present timely information to provide key information or actions to enrich the user experience.

The message bar supports several levels of information:

  • Default (as shown above)
  • Warning – used in exceptional situations
  • Severe Warning – used situations, that could turn into a harmful one
  • Error – used for serious failure
  • Remove – used when a user faces security restrictions
  • Success – used when something went right.

The messagebar directive

The new umessagebar directive will be a part of ngOfficeUIFabric v0.11.0 release.
Read More »

ngOfficeUIFabric – the messagebanner component

Last year Andrew Connell came up with the initiative to build Angular directives for the Office UI Fabric design framework.

Using the ngOfficeUIFabric in several customer projects, I already experienced the great advantages of these directives compared to using the original Office UI Fabric templates.

The messagebanner directive

With the recent release of 0.10.0 version of the ngOfficeUIFabric a new directive is available: the message banner.

Read More »

ngOfficeUIFabric is awesome!

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.

Read More »