To use our NativeScript Waveform view within Angular, we need to first register it. You can do this in the root module, root app component, or another place that is initialized at boot time (usually, not in a lazy-loaded module). To be tidy, we will register it within SharedModule in the same directory, so add the following in app/modules/shared/shared.module.ts:

...
// register nativescript custom components
import { registerElement } from 'nativescript-angular/element-registry';
import { Waveform } from './native/waveform';
registerElement('Waveform', () => Waveform);
...
@NgModule({...
export class SharedModule {...

The registerElement method allows us to define the name of the Component we want to use within Angular components as the first argument, and takes a resolver function that should return the NativeScript View class to use for it. 

Let's now use our new IWaveformModel and clean up some of RecordModel to use it, as well as prepare to create our Android implementation next. Let's refactor a couple things out of RecordModel into a common file to share code between our iOS and Android (coming soon!) models.

Create app/modules/recorder/models/record-common.ts:

import { IWaveformModel } from '../../shared/native/waveform';
import { knownFolders } from 'file-system';

export enum RecordState {
  readyToRecord,
  recording,
  readyToPlay,
  playing,
  saved,
  finish
}

export interface IRecordEvents {
  stateChange: string;
}

export interface IRecordModel extends IWaveformModel {
  readonly events: IRecordEvents;
  readonly recorder: any;
  readonly audioFilePath: string;
  state: number; 
  savedFilePath: string;
  toggleRecord(): void;
  togglePlay(startTime?: number, when?: number): void;
  stopPlayback(): void;
  save(): void;
  finish(): void;
}

export const documentsFilePath = function(filename: string) {
  return `${knownFolders.documents().path}/${filename}`;
}

This contains most of what was at the top of RecordModel, with the addition of the IRecordModel interface, which extends IWaveformModel. Since we built out our iOS implementation, we now have a model shape we would like our Android implementation to adhere to. Abstracting that shape into an interface will provide us a clear path to follow when we move to Android momentarily. 

For convenience, let's also create an index for our models, which would also expose this common file, in app/modules/recorder/models/index.ts:

export * from './record-common.model';
export * from './record.model';

We can now modify RecordModel to import these common items, as well as implement this new IRecordModel interface. Since this new interface also extends IWaveformModel, it will immediately tell us we need to implement the readonly target getter and the dispose() method, as required to be used with our Waveform view:

import { Observable } from 'data/observable';
import { IRecordModel, IRecordEvents, RecordState, documentsFilePath } from './common';

export class RecordModel extends Observable implements IRecordModel {
  ...
  public get target() {
    return this._mic;
  }

  public dispose() {
    AudioKit.stop();
    // cleanup
    this._mainMixer = null;
    this._recorder = null;
    this._micBooster = null;
    this._micMixer = null;
    this._mic = null;
    // clean out tmp files
    (<any>AVAudioFile).cleanTempDirectory();
  }
  ...

The target of RecordModel will be the microphone that the Waveform view will use. Our dispose method will stop the AudioKit engine while doing reference clean up, as well as ensuring to clean out any temporary files created while recording.