ngx-renderer

ngx-renderer

Advanced abstract renderer for Angular

Attention

This is Work In Progress

Installation

$ npm install ngx-renderer --save

Also please make sure you have latest version of tslib library

Usage

Default browser application

Import AdvancedRendererModule in your app module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AdvancedRendererModule } from 'ngx-renderer';

@NgModule({
  imports: [
    BrowserModule,
    AdvancedRendererModule,
  ]
})
export class AppModule { }

Then in your component/directive/service inject AdvancedRenderer and use it:

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import { AdvancedRenderer, AdvancedRendererMethod, elementExpression } from 'ngx-renderer';

@Component({
  selector: 'my-component',
  template: `<input type="text" #myInput placeholder="This will have auto-focus">`
})
class MyComponent implements AfterViewInit {
  @ViewChild('myInput') myInput: ElementRef;

  constructor(private renderer: AdvancedRenderer) { }

  ngAfterViewInit() {
    // This will be safely executed on Browser UI thread (or ignored if not available)
    this.renderer.execute('input.focus()', { input: elementExpression(this.myInput) })
      .then(() => console.log('Input got focus! Yay!!'));
  }
}

Browser + Webworker application

All you need to do is update your AppModule. Your application logic code remains untouched!

Here is the change in your AppModule which now runs on Webworker thread:

import { NgModule } from '@angular/core';
import { WorkerAppModule } from '@angular/platform-webworker';
import { AdvancedRendererWorkerModule } from 'ngx-renderer';

@NgModule({
  imports: [
    WorkerAppModule,
    AdvancedRendererWorkerModule,
  ]
})
export class AppInWorkerModule { }

And here is the change on UI bootstrapping code:

import { bootstrapWorkerUi } from '@angular/platform-webworker';
import { ADVANCED_RENDERER_UI_PROVIDERS } from 'ngx-renderer';

bootstrapWorkerUi('app-worker.js', ADVANCED_RENDERER_UI_PROVIDERS);

Server-side application

If you want to run your application on the server again just update your AppModule:

import { NgModule } from '@angular/core';
import { AdvancedRendererNoopModule } from 'ngx-renderer';

@NgModule({
  imports: [
    AdvancedRendererNoopModule,
  ]
})
export class AppInWorkerModule { }

License

MIT © Alex Malkevich