Edit

Nova Angular

Angular bindings for Hypernova.

Install package

npm install --save hypernova-angular

Usage

The bindings for hypernova render the Nova views on the server and hydrate them on the browser to make them interactive. It's also know as Univeral Rendering.

Server Side

On the server, wraps the component in a function to render it to a HTML string given its props.

import 'core-js/proposals/reflect-metadata';
import 'zone.js';

import * as hypernova from 'hypernova/server'
import { renderAngular } from 'hypernova-angular'

import { ExampleModule } from './components/example/example.module'
import { ExampleComponent } from './components/example/example.component'

hypernova({
  getComponent (name: string) {
    if (name === 'Example') {
      return renderAngular(name, ExampleComponent, ExampleModule)
    }
  }
})

Client Side

On the client, it scans the DOM for any server-side rendered instances of it. It then hydrate those components using the server-specified props.

import 'core-js/proposals/reflect-metadata';
import 'zone.js';

import { renderAngular } from 'hypernova-angular'

import { ExampleModule } from './components/example/example.module'
import { ExampleComponent } from './components/example/example.component'

renderAngular('Example', ExampleComponent, ExampleModule)
← Vue.jsSvelte →