Proper Implementation of Getter and Setter for Model Objects in Angular 4

Problem Context and Core Challenges

In Angular 4 application development, developers frequently need to implement custom getter and setter methods for model objects to execute additional logic during property access. However, a common misconception is directly using Angular's @Input() decorator to declare properties in model classes, which creates conflicts between TypeScript's accessor mechanism and Angular's data binding system.

Analysis of Incorrect Implementation

Consider this problematic model class implementation:

export class MyModel {
    @Input('date')
    get date(): String {
        console.log('Getting date');
        // calculation logic
    }

    set date(val) {
        console.log('Setting date: ' + val);
        // calculation logic
    }
}

When using two-way data binding in templates:

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

getter and setter methods won't be invoked properly because the @Input() decorator alters property metadata, causing Angular to attempt direct property access rather than going through accessors.

Correct Implementation Approach

The proper approach follows TypeScript's standard accessor pattern using private properties for actual storage:

export class MyModel {
    private _date: string;

    get date(): string {
        console.log('Getting date');
        return this._date;
    }

    set date(newDate: string) {
        console.log('Setting date: ' + newDate);
        // execute date calculation logic here
        this._date = newDate;
    }
}

This pattern ensures getter and setter methods work correctly while maintaining property encapsulation.

Instantiation and Usage

Proper instantiation of model objects in components is crucial:

export class MyComponent {
    model: MyModel = new MyModel();
    
    // subsequent read/write operations through model.date accessors
}

After creating an instance with the new keyword, Angular's two-way data binding [(ngModel)] will correctly invoke getter and setter methods.

Advanced Application Scenarios

In practical development, getters and setters can implement complex business logic. For example, calculating the day of week in a date setter:

set date(newDate: string) {
    const dateObj = new Date(newDate);
    this._date = newDate;
    this.dayOfWeek = dateObj.getDay(); // calculate day of week
}

This pattern enables model objects to serve not only as data containers but also to encapsulate related business logic.

Connection with HTML Escaping

When discussing technical implementations, it's important to distinguish between HTML tags and text content. For instance, when describing the <br> tag in documentation, it must be escaped to avoid being parsed as an actual line break instruction. This principle parallels string handling in TypeScript—both require clear differentiation between code instructions and text content.

Summary and Best Practices

When implementing getter and setter methods for model objects in Angular 4, avoid directly decorating accessor properties with the @Input() decorator. Instead, adopt standard TypeScript accessor patterns combined with private properties. This ensures accessor logic executes correctly in two-way data binding while maintaining code clarity and maintainability. By following this pattern, developers can fully leverage TypeScript's strong typing features to build more robust Angular applications.