@cerebral/angular
    TypeScript icon, indicating that this package has built-in type declarations

    4.2.1 • Public • Published

    @cerebral/angular

    Angular view for Cerebral.

    Install

    npm install @cerebral/angular @angular/core @angular/platform-browser babel-plugin-transform-decorators-legacy

    CerebralService

    The Cerebral service exposes the Cerebral controller to your application.

    import { NgModule } from '@angular/core'
    import { BrowserModule } from '@angular/platform-browser'
     
    import { provide } from 'cerebral'
    import { AppService } from '@cerebral/angular'
     
    import { AppComponent }  from './app.component.ts'
    import { SomeAngularService } from './SomeAngularService'
     
    // Create a factory to instantiate Cerebral. It can receive
    // dependencies which you can "provide" to Cerebral to be used
    // within sequences
    export function configureApp(someAngularService : SomeAngularService) {
      return new AppService({
        // We use the "provide" function to an angular service to the sequences
        // of Cerebral
        providers: [
          provide('someAngularService', someAngularService)
        ]
      })
    })
     
    @NgModule({
      imports:      [ BrowserModule ],
      declarations: [ AppComponent ],
      bootstrap:    [ AppComponent ],
      providers: [
         {
          provide: AppService,
          useFactory: configureApp,
          deps: [SomeAngularService]
        },
      ]
    })
    export class AppModule {}

    connect decorator

    The connect decorator connects state and signals to your components.

    import {
      Component,
      ChangeDetectionStrategy,
      ChangeDetectorRef
    } from '@angular/core'
    import { sequences, state } from 'cerebral/tags'
    import {
      connect,
      AppService,
      CerebralComponent
    } from '@cerebral/angular'
     
    @Component({
      selector: 'app-component',
      template: `
        <div (click)="onClick()">{{foo}}</div>
      `,
      // Change detection needs to be set to "OnPush"
      changeDetection: ChangeDetectionStrategy.OnPush
    })
    @connect({
      // For AOT to work you will have to use the array version of template
      // tags
      myName: state(['foo']),
      onClick: sequences(['clicked'])
    })
    export class AppComponent extends CerebralComponent {
      // You have to inject "ChangeDetectionRef" and "ControllerService" and pass
      // them to parent for connect to do its work
      constructor(cdr: ChangeDetectorRef, app: AppService) {
        super(cdr, app)
        app.getSequence('onClick')()
      }
    }

    Keywords

    none

    Install

    npm i @cerebral/angular

    DownloadsWeekly Downloads

    491

    Version

    4.2.1

    License

    MIT

    Unpacked Size

    8.51 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar