Getter and Setter of Model object in Angular 4

Question

How can I make getter and setter work in my model class?

My goal is to calculate integer value of the selected day when input, containing the date, updated. I was going to do it in setter, but Angular 4 ignores setter and getter of my model.

My model class:

export class MyModel {     @Input('date')     get date(): String {         console.log('Getting date');         ...     }      set date(val) {         console.log('Setting date: ' + val);         ...     } } 

My template:

... <input class="form-control" name="dp" [(ngModel)]="model.date"> ... 

But getter and setter don't work. What am I missing?

Answer 1

The way you declare the date property as an input looks incorrect but its hard to say if it's the only problem without seeing all your code. Rather than using @Input('date') declare the date property like so: private _date: string;. Also, make sure you are instantiating the model with the new keyword. Lastly, access the property using regular dot notation.

Check your work against this example from https://www.typescriptlang.org/docs/handbook/classes.html :

let passcode = "secret passcode";  class Employee {     private _fullName: string;      get fullName(): string {         return this._fullName;     }      set fullName(newName: string) {         if (passcode && passcode == "secret passcode") {             this._fullName = newName;         }         else {             console.log("Error: Unauthorized update of employee!");         }     } }  let employee = new Employee(); employee.fullName = "Bob Smith"; if (employee.fullName) {     console.log(employee.fullName); } 

And here is a plunker demonstrating what it sounds like you're trying to do: https://plnkr.co/edit/OUoD5J1lfO6bIeME9N0F?p=preview