Intercepting property changes

Sometimes, you may want to do some tweaking on the data flowing into a child component from the parent component. You can use getters and setters to intercept the data and manipulate it before setting it on the view. Let's see that in play by capitalizing the author names before they are set:

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

@Component({
  selector: 'app-comment-item',
  templateUrl: './comment-item.component.html',
  styleUrls: ['./comment-item.component.css']
})
export class CommentItemComponent implements OnInit {
  
  private _comment;
  constructor() { }

  ngOnInit() {}

  @Input()
  set comment(comment) {
    this._comment = Object.assign(comment, {       author: comment.author.toUpperCase() }); ...

Get TypeScript 2.x for Angular Developers now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.