ng-mix

NgMix

Angular schematic library for generating TypeScript mixins designed for Angular Components.

TypeScript mixins are then used to implement a composition pattern to share common logic across Angular components.

Table of Contents

• Requirements
• Installation
• Usage
  • CLI Command
  • Mixin Overview
  • Usage with Component
  • Composing with Mixins
  • Angular Lifecycle Hooks
  • Angular @Input and @Outputs Decorators
  • Angular Services

Requirements

• Angular 8 or higher

Installation

Install via npm:

npm i ng-mix

Usage

CLI Command

• To create a mixin run the following command

  ng g ng-mix:mixin
  

• You will be prompted to give your mixin a name

Mixin Overview

• The following code will be generated (sample.mixin.ts)

  import { Injectable, OnInit } from '@angular/core';
  import { BaseInjectorConstructor } from 'ng-mix';
  
  export const SampleMixin = <Tbase extends BaseInjectorConstructor>(superClass: Tbase) => {
  
  @Injectable()
  class Sample extends superClass implements OnInit {
  
    // You can inject services from the BaseClassInjector i.e
    // myService = this.injector.get(MyService);
  
    ngOnInit(): void {
      //Call super's lifecycle method
      super.ngOnInit();
  
      //Implementation here
    }		
  }
  
  return Sample;
  }
  

• All mixins will inherit BaseClassInjector

Back to top

Usage with Component

• Extend your component class with the mixin.

import { Component, Injector } from '@angular/core';
import { SampleMixin } from './sample.mixin';
import { Base } from 'ng-mix';

@Component({
  selector: 'app-component',
  templateUrl: './app-component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent extends SampleMixin(Base) {
  
  constructor(public injector: Injector) {
    //Provides injector to the mixin(s) for access to Angular Services via DI
    super(injector);
  }
}

• Provide ng-mix's Base class to the mixin.
• Provide the injector to the mixin(s) by passing it into the super call in the constructor.

Back to top

Composing with Mixins

• You can mix mixins together as shown

  const Mixins = SampleOneMixin(SampleTwoMixin(Base));
  export class AppComponent extends Mixins {
  ...
  };
  

Back to top

Angular Lifecycle Hooks

• When implementing an Angular lifecycle hook method on a mixin or component using mixin(s), always call super.[ lifecycle method] when mixins are used to ensure the lifecycle methods for all mixins are invoked.

  //sample.mixin.ts
  
  export const SampleMixin = <Tbase extends BaseInjectorConstructor>(superClass: Tbase) => {
  
    @Injectable()
    class Sample extends superClass {
      ...
      ngOnInit(): void {
        super.ngOnInit(); // Make sure to call super lifecycle method!
      //Implementation here
      }		
          ...
    }
  
    return Sample;
  }
  

  
  //app.component.ts
  
  @Component({
    ...
  })
  export class AppComponent extends SampleMixin(Base) { 
    ...
    ngOnInit(): void {
      super.ngOnInit(); // Make sure to call super lifecycle method!
      //Implementation here
    }		
    ...
  }
  

Back to top

Angular @Input and @Outputs Decorators

• If @Input/@Output decorators are used in mixins, they will need to be declared in the @Component decorator of the component.

  //sample.mixin.ts
  
  export const SampleMixin = <Tbase extends BaseInjectorConstructor>(superClass: Tbase) => {
  
    @Injectable()
    class Sample extends superClass {
      @Input sampleInput = '';
      @Output sampleOutput = new EventEmitter<any>();
      
      ...
    }
  
    return Sample;
  }
  

  
  //app.component.ts
  
  @Component({
    ...
    inputs: ['sampleInput'],
    outputs: ['sampleOutput']
  })
  export class AppComponent extends SampleMixin(Base) { ... }
  

Back to top

Angular Services

• Services can be accessed via Angular's Injector which is available in every mixin class.

  //sample.mixin.ts
  import { SampleService } from './sample.service.ts'
  
  export const SampleMixin = <Tbase extends BaseInjectorConstructor>(superClass: Tbase) => {
  
    @Injectable()
    class Sample extends superClass {
  
      sampleService = this.injector.get(SampleService);
      
      ...
    }
  
    return Sample;
  }