Watch input changes - Angular 2/5

Angular 4WatchDetect Changes

In this article we are going to discuss about detecting an item changes from another component. It was done by using $watch property in Angular js 1 but in Angular 2+ we don't have such listeners. Angular team has removed those as part of improving overall performance. But don't worry Angular allow us to do this in a different way. Let us check those.

Angular has two properties ngOnChanges and setter. You can use either of these to detect a change. Let us check both with some examples.

Angular ngOnChanges

---

I am going to create a simple input box, that values we will be showing in other component.

Component

<div>
 <detect-changes [message]='queryMessage'></detect-changes>
 <input type="text" [(ngModel)]="queryMessage">
</div>

import { Component } from '@angular/core';
import { FlashMessageComponent } from './detectMessageComponent';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    queryMessage: string;
    constructor() { }
}

Here detect-changes is another component there we will be getting user entered values on the input box.

detect-changes component

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

@Component({
    selector: 'detect-changes',
    template: '<div>'
        + '<span>{{message}}</span>'
        + '</div>',
    styleUrls: ['./app.component.css']
})
export class DetectMessageComponent {
    @Input() message: string;

    constructor() { }

    ngOnChanges(changes: SimpleChanges) {
        console.log(changes.message.currentValue);// current selected value
        console.log(changes.message.previousValue);// previous selected value
    }
}

Whatever you are typing in input box will be reflected here. Add a console.log or assign to some variable to test this. Here I have used ngOnChanges to watch any changes on @input. Using this you can easily check previous value and current value. Here changes.message.currentValue indicates current value and changes.message.previousValue for previous value. By using ngOnChanges you can get all the inputs and also you can compare both previous and current value. Don't forget to import SimpleChanges from @angular/core.

I have created a simple flash message component by using ngOnChanges, check that example here. If you want to know more about sharing data between components you can check these links as well: - share data between parent, child component , and share data by using a service file.

Setter

---

This also can be used for watching an @input. This can use only for one input changes. Also there is no way to compare previous and current value, for that you need to write some logic.

@Input() set message(value: string) {
    console.log(value);
}

We are done. In this article we have discussed about watching an input value changes. It can check values regardless of component.

Angular 4WatchDetect Changes

Related Info

1. Http calls in Angular with simple examples.

2. Disable submit button until all mandatory fields are filled - Angular

3. Angular client side pagination.

4. Angular show more/less pagination