@cerebral/angular

@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 { ControllerService } 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 signals
export function configureController(someAngularService : SomeAngularService) {
  return new ControllerService({
    // We use the "provide" function to an angular service to the signals
    // of Cerebral
    providers: [
      provide('someAngularService', someAngularService)
    ]
  })
})

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  providers: [
     {
      provide: ControllerService,
      useFactory: configureController,
      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 { signal, state } from 'cerebral/tags'
import {
  connect,
  ControllerService,
  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: signal(['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, controller: ControllerService) {
    super(cdr, controller)
    controller.getSignal('onClick')()
  }
}