Can I use Fabric-UI styles and components in Angular 10 ??

[Vipintk]

Hi Team,

Kindly advise if I can use Fluent UI Style and Components in Angular. If so what is the method. All the documents talks about React. Your early response is highly appreciated.

Thanks,

[alexander-kastil]

Maybe you should compile Fabric React Components to HTML Custom Elements 👍

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements

Angular has Angular Elements for this Job ... I am sure there ist something like this in the React Universe

[Danny-Engelman]

React and Custom Elements are not BFFs like Angular and Vue are with Custom Elements

https://custom-elements-everywhere.com/libraries/react/results/results.html

[StfBauer]

You can't - Like the description says, it only contains a basic CSS base line of things.

This repository contains the core styles used across all aspects of Fabric including icons, type, fonts, colors, the grid, etc. This is a separate project from Office UI Fabric React, which contains the React components.

The controls are React only so not for Angular.

[alexander-kastil]

React and Custom Elements are not BFFs like Angular and Vue are with Custom Elements

https://custom-elements-everywhere.com/libraries/react/results/results.html

What are BFFs? As I understand the Link provided, React does not support all Functionality when it comes to Web Components. Are there issues when compiling Fabric components to WC?

[Danny-Engelman]

BFF = Best Friends Forever

React is diverting from the W3C standard.

Makes for an interesting future, Google,Apple,Microsoft & Mozilla defining what runs in the Browser,
and Facebook not supporting native Components that run in the Browser

I did the Fabric Iconator many moons ago.
But when the MS-SharePoint & Fabric teams chose to support React only,
and the SP team bluntly ditched the (CSR) Client Side Rendering method of including JS code that had worked for many years.
I left the MS-SharePoint world after 16 years (always Front-End) and ditched both SP and Fabric.

React is the new Flash. And Google Tables is the new SharePoint

And I now do Icons the modern way.

[alexander-kastil]

I found this Angular Controls which are close to Fluent UI https://www.infragistics.com/products/ignite-ui-angular/angular/components/combo.html

[biapar]

BFF = Best Friends Forever

React is diverting from the W3C standard.

Makes for an interesting future, Google,Apple,Microsoft & Mozilla defining what runs in the Browser,
and Facebook not supporting native Components that run in the Browser

I did the Fabric Iconator many moons ago.
But when the MS-SharePoint & Fabric teams chose to support React only,
and the SP team bluntly ditched the (CSR) Client Side Rendering method of including JS code that had worked for many years.
I left the MS-SharePoint world after 16 years (always Front-End) and ditched both SP and Fabric.

React is the new Flash. And Google Tables is the new SharePoint

And I now do Icons the modern way.

And VUE?

[Danny-Engelman]

And VUE?

See: https://custom-elements-everywhere.com/

React is the odd one out because it forces you to use React instead of native DOM and Event system.
So if you want to use a native W3C (3rd party) Web Component, you have to write React code (for every Component) to wrap it in a React layer... that kinda defeats the purpose of 'components'

All other Frameworks/'Frameworks' (Angular, Vue, Svelte) are 100% compatible with native W3C Web Components.
And have configuration options to create native Web Components (automagically wrapped in their layer of Framework code of course)

We had hoped Facebook would have fixed that in React 17... and they didn't...
They again didn't.. the discussion to fix this has been going on for over 3 years now

Facebook 'owns' about 60% of the market now, maybe that is why they have a FB* the rest of the world attitude.

But then again... once Microsoft owned 95% of the Browser market...

And once Flash was installed on nearly every device...

Usage numbers don't count in the Internet world.