How to extend the wijmo components

How to extend the wijmo components

Posted by: sh.koizumi on 22 October 2018, 10:03 am EST

• 

  sh.koizumi

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 22 October 2018, 10:03 am EST

  I am trying to extend the wijmo conponent to refactor my application but I can’t get two way binding working. data.currentItem.startWeek never gets updated.

  Form parent I called extended component like this

  <my-form-number [formLabel]="'Rotation Start Week'" [formDisabled]="editMode===false" [formMinNumber]="1" [formMaxNumber]="60" [(formModel)]="data.currentItem.startWeek"></stf-form-number>
  
  

  Here are the component.

  @Component({
      selector: "my-form-number", 
      template: ` <div >
                      <label class="control-label">{{formLabel}}</label> 
                      <wj-input-number class="wj-form-control wj-content" [isRequired]="true" [isDisabled]="formDisabled" [min]="formMinNumber" [max]="formMaxNumber" [(ngModel)]="formModel" *ngIf="formModel" ></wj-input-number>                                                  
                  </div>`      
  }) 
  export class myFormNumberComponent implements AfterViewInit
  {
      @Input() formLabel:string;  
      @Input() formModel: any;    
      @Input() formMaxNumber: number;
      @Input() formMinNumber: number;
      @Input() formDisabled: boolean;
      
      constructor(){                                           }
     
      ngAfterViewInit(){}
  }
  

• 

  sh.koizumi

  • Post Options:
  • Link
    Copy

  Posted 22 October 2018, 10:03 am EST

  I am using angular6 nad Wijmo Library 5.20181.462

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 23 October 2018, 12:50 am EST

  That’s because, in angular, to implement 2-way binding correctly we need to have an equivalent event emitter. So if we add a formModelChange event emitter in ‘my-form-number’ component then everything should work fine as expected.
  
  Please refer to the following sample: https://stackblitz.com/edit/angular-cd185n?file=src%2Fapp%2Fapp.component.html

  ~Sharad

• 

  sh.koizumi

  • Post Options:
  • Link
    Copy

  Posted 23 October 2018, 10:10 am EST

  Thanks I never knew I had to use the change event to update. I guess I was using shorthand before.