Angular-React is built of two main parts:
- Core (
@angular-react/core
) - Wrapper libraries (
@angular-react/fabric
,@angular-react/semantic-ui
)
The core library takes care of the heavy lifting, orchestrates the rendering of the React components insider Angular, interoperability between Angular and React and provide some functionality that's commonly needed when creating wrapper components (more on that below).
Wrapper libraries create what's called "wrapper components" around React components exposed by the native UI library, as well as handle all the plumbing around binding them to Angular, the logic in these libraries is thus usually pretty limited.
Philosophy
What separates Angular-React from other wrapper libraries, besides the fact that most solutions in this space are between AngularJS (aka Angular 1.x) and React is that we believe that application developers should focus on what they're already doing - writing Angular apps.
Other solutions create simple bindings between the two libraries/frameworks, on-demand, but avoid dealing with the caveats of merging two view libraries together, and require you to know both libraries well enough, and deal with concepts that may be foreign to you, as an Angular developer - like HOCs, render props etc as well as dealing with change detection.
What Angular-React aims to do is bridge the gap, such that the experience for the end developer of the app is one where they can keep thinking in "Angular" as much as possible, while still using other libraries under the hood.
Below assumes you're going to use @angular-react/fabric
, to integrate the office-ui-fabric-react
library into your Angular app.
Using @angular-react
Integrating @angular-react
into your existing Angular project is pretty straightforward:
-
npx install-peerdeps --save @angular-react/fabric
-
In your
AppModule
, changeBrowserModule
toAngularReactBrowserModule
.Just like
BrowserModule
,AngularReactBrowserModule
should only be imported once, at the top of the module hierarchyimport { NgModule } from '@angular/core'; import { AngularReactBrowserModule } from '@angular-react/core'; @NgModule({ imports: [ AngularReactBrowserModule, ... ], ... }) export class AppModule {}
-
In each component that would like use use an
@angular-react/fabric
component'sNgModule
import the relevant Fabric module. e.g.:import { FabButtonModule } from '@angular-react/fabric'; @NgModule({ imports: [ FabButtonModule, ], declarations: [CounterComponent] }) export class MyFeatureModule {
-
Use the component(s) exposed by the module:
<!-- counter.component.html --> <fab-default-button [text]="count" (onClick)="count++"></fab-default-button>
Note that you can also create a
FabricModule
in your app andimport
+export
allFab*Module
s there, similarly to other UI libraries. There are pros and cons to each approach, so choose what works best for your use-case.
App requirements
Currently @angular-react/core
requires the following:
@angular/*@^7.0.3
rxjs@^6.2.0
react@^16.6.3
react-dom@^16.6.3
Additional dependencies may be required, based on your UI library of choice:
@angular-react/fabric
:office-ui-fabric-react@6.151.0
(other versions may work as well, but it is not guaranteed)
@angular-react/semantic-ui
:semantic-ui-react@^0.79.1
Always consult the
package.json
for the latest dependencies versions required. In case of a conflict between the above andpackage.json
, prefer to use the ones in the thepackage.json
.
Browser support
Browser support is determined by the lowest common dominator of all libraries:
- Angular
- React
- Your UI library of choice (e.g.
@angular-react/fabric
->office-ui-fabric-react
)