goten-ngmodel

Purpose

Angular data binding can be achieve through ngModel directive (among others). This directive types is used on the template generally on tag <input [(ngModel)]="nameData"/>. In some cases we needed the same behavior on our components like <our-component [(ngModel)] = "nameData"> That makes goten-ngmodel

Installation.

$ npm install goten-ngmodel

import { FormsModule } from '@angular/forms'
...
@NgModule({
    ...
    imports: [
        ...
        FormsModule
    ],
    ...
})

import { Component } from '@angular/core';
@Component({
  selector: 'a-context-component',
  template: `
    <our-ng-model-comp [(ngModel)] = "title" ></our-ng-model-comp>
    <button (click)="changeTitle()">ChangeFromParent</button>
  `
})
export class AContextComponent {
  title = 'test-ngmodel';
  changeTitle() {
    this.title = 'from Parent'
  }
}

import { Component } from '@angular/core';
import { GotenNgModel, MakeProvider } from 'goten-ngmodel'
@Component({
  selector: 'our-ng-model-comp',
  template: `
    {{value}}
    <p>
      <button (click)="changeTitle()">ChangeFromChild</button>
    </p>
  `,
  providers: [ MakeProvider( GotenNgModelComponent ) ]
})
export class GotenNgModelComponent extends GotenNgModel {
    changeTitle(){
      this.writeValue('from Child')
    }
}

value is the reference to ngmodel parameter. In this example value contains "test-ngmodel" string. After of press button from AContextComponent will print "from parent" After of press button from GotenNgModelComponent will print "from child" writeValue is the method whereby we write the binding data.

We can specify the Type of our data.

...
export class GotenNgModelComponent extends GotenNgModel<someType> {
    ...
}

someType can by any structure of data. Manage it , on value depends of the developer.