Angular2 manually implement change detection using ApplicationRef

Question

Getting change detection error

The expression has changed after checking it. Previous value: "true". Current value: "false"

so I want to manually start another round of change detection. Found information on using ApplicationRef.tick() , but an error is currently appearing

ERROR in [default] C: \ development \ SolarUI11 \ src \ app \ update \ update.component.ts: 8: 11 Argument of type '{selector: string; styles: any []; template: any; providers: (typeof ApplicationRef | typeof Date ... 'is not assigned to the parameter of type' Component '. The types of ownership of providers are incompatible. Type' (typeof ApplicationRef | typeof DatePipe) [] 'cannot be assigned to type' Provider []. Type 'typeof ApplicationRef | typeof DatePipe' is not assigned to the type 'Provider'. Type 'typeof ApplicationRef' is not assigned to the type 'Provider'. Type 'typeof ApplicationRef' is not assigned to the type 'FactoryProvide p'. The property “provide” is not present in the type “typeof ApplicationRef” .

I think that I was just stuck in the syntax for implementing this, I could not find enough information to be able to use it.

Typescript:

 import { Component, Input, ApplicationRef } from '@angular/core'; import { FormGroup, FormBuilder, Validators } from '@angular/forms'; import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap'; import {DatePipe} from "@angular/common"; import { DataTable } from '../data/datatable'; import { DPS } from '../data/datainfo.ts'; @Component({ selector: 'update-validation', styleUrls: ['../app.component.css'], templateUrl: 'update.component.html', providers: [DatePipe, ApplicationRef] }) export class UpdateComponent { @Input() receivedRow:DataTable; public dt: NgbDateStruct; public dt2: NgbDateStruct; public startCheck: boolean = false; public endCheck: boolean = false; updateForm : FormGroup; constructor(fb: FormBuilder, private datePipe: DatePipe, private appref: ApplicationRef){ this.updateForm = fb.group({ 'dataPoint' : [null, Validators.required], 'ICCP' : [null, Validators.required], 'startDate' : [null, Validators.required], 'endDate' : [null, Validators.required] }, {validator: this.endDateAfterOrEqualValidator}) } ngOnChanges(){ if(this.receivedRow){ this.updateForm.controls['dataPoint'].setValue(this.receivedRow.tDataPoint); this.updateForm.controls['ICCP'].setValue(this.receivedRow.tICCP); this.updateForm.controls['startDate'].setValue(this.receivedRow.tStartDate); this.updateForm.controls['endDate'].setValue(this.receivedRow.tEndDate); } } resetForm(){ location.reload(); //this.updateForm.reset(); } submitForm(value: any, originalRow: any){ var dataPointID = originalRow.receivedRow.tDataPoint; for (let entry in DPS) { if (DPS[entry].tDataPoint === dataPointID) { DPS[entry].tDataPoint = String((<HTMLInputElement>document.getElementById("dataPoint")).value); DPS[entry].tICCP = String((<HTMLInputElement>document.getElementById("ICCP")).value); DPS[entry].tStartDate = String((<HTMLInputElement>document.getElementById("startDate")).value); DPS[entry].tEndDate = String((<HTMLInputElement>document.getElementById("endDate")).value); } } } getStartDate(){ var month = this.receivedRow.tStartDate.substring(0,2); var day = this.receivedRow.tStartDate.substring(3,5); var year = this.receivedRow.tStartDate.substring(6,10); var dateToUse = new Date(Number(year),Number(month)-1,Number(day)); let timestamp = this['startDate'] != null ? new Date(this['startDate'].year, this['startDate'].month-1, this['startDate'].day).getTime() : dateToUse.getTime(); this.updateForm.controls['startDate'].setValue(this.datePipe.transform(timestamp, 'MM/dd/yyyy')); this.appref.tick(); } getEndDate(){ var month = this.receivedRow.tEndDate.substring(0,2); var day = this.receivedRow.tEndDate.substring(3,5); var year = this.receivedRow.tEndDate.substring(6,10); var dateToUse = new Date(Number(year),Number(month)-1,Number(day)); let timestamp = this['endDate'] != null ? new Date(this['endDate'].year, this['endDate'].month-1, this['endDate'].day).getTime() : dateToUse.getTime(); this.updateForm.controls['endDate'].setValue(this.datePipe.transform(timestamp, 'MM/dd/yyyy')); this.appref.tick(); } public showDatePick(selector):void { if(selector === 0) { this.startCheck = !this.startCheck } else { this.endCheck = !this.endCheck; } } endDateAfterOrEqualValidator(formGroup): any { var startDateTimestamp, endDateTimestamp; for(var controlName in formGroup.controls) { if (controlName.indexOf("startDate") !== -1) { startDateTimestamp = Date.parse(formGroup.controls[controlName].value); } if (controlName.indexOf("endDate") !== -1) { endDateTimestamp = Date.parse(formGroup.controls[controlName].value); } } return (endDateTimestamp < startDateTimestamp) ? { endDateLessThanStartDate: true } : null; } } 

Answer 1

 import { Component, Input, ChangeDetectorRef } from '@angular/core'; 

Enter

 constructor(private cdRef:ChangeDetectorRef) {} 

and use it

 public showDatePick(selector):void { if(selector === 0) { this.startCheck = !this.startCheck } else { this.endCheck = !this.endCheck; } this.cdRef.detectChanges(); } 

Answer 2

Have you tried using ChangeDetectorRef ?

 constructor(private changeDetector: ChangeDetectorRef) { } 

And discover the changes with

 changeDetector.detectChanges();