Skip to content

Home

Jump to bottom
Ben Grynhaus edited this page Mar 19, 2019 · 2 revisions

Angular-React is built of two main parts:

  1. Core (@angular-react/core)
  2. 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:

  1. npx install-peerdeps --save @angular-react/fabric

  2. In your AppModule, change BrowserModule to AngularReactBrowserModule.

    Just like BrowserModule, AngularReactBrowserModule should only be imported once, at the top of the module hierarchy

     import { NgModule } from '@angular/core';
 import { AngularReactBrowserModule } from '@angular-react/core';

 @NgModule({
     imports: [
         AngularReactBrowserModule,
         ...
     ],
     ...
 })
 export class AppModule {}

  3. In each component that would like use use an @angular-react/fabric component's NgModule import the relevant Fabric module. e.g.:

     import { FabButtonModule } from '@angular-react/fabric';

 @NgModule({
     imports: [
         FabButtonModule,
     ],
     declarations: [CounterComponent]
 })
 export class MyFeatureModule {

  4. 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 and import + export all Fab*Modules 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 and package.json, prefer to use the ones in the the package.json.

Browser support

Browser support is determined by the lowest common dominator of all libraries:

Clone this wiki locally