How Do I Detect A Text-input Change Event With Angular ?

_detect-text-input-change-event.md

Code Examples for my Blog Post: How Do I Detect A Text-input Change Event With Angular

The full Github repo can be found here: https://github.com/kevinchisholm/video-code-examples/tree/master/angular/templates-and-data/change-attribute

Video Demonstration

home.component.ts

import {Component} from '@angular/core';

@Component({
  selector: 'home',
  templateUrl: 'src/home/home.html'
})
export class HomeComponent {
  content: string = "";
  title: string = "";
  changeCount: number = 0;
}

home.html

<div>
    <h2>Enter some text, and then press the "tab" key.</h2>
    <p>(or just click outside of the text box)</p>
    <h3>You have made {{changeCount}} changes so far.</h3>
    <input
    type="text"
    (change)="changeCount = changeCount + 1"
    placeholder="Enter some text here" />
</div>