EventEmitter is not working in Angular 5

Question

I have child controller:

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

@Component({
    selector: 'select-test',
    templateUrl: 'select-test.component.html',
    styleUrls: ['select-test.component.css']
})
export class SelectTestComponent {
  @Input() model: any;
  @Output() public changeModel: EventEmitter<any> = new EventEmitter<any>();
}

Html:

<input [(ngModel)]="model" (ngModelChange)="this.changeModel.emit(this.model)" />

Parent html:

<p>{{testData}}</p>
<select-test [(model)] = "testData"></select-test>

Why child component doesn't change parent component variable?

Answer 1

Your code should be like this:

Component.ts:

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

@Component({
   selector: 'select-test',
   templateUrl: 'select-test.component.html',
   styleUrls: ['select-test.component.css']
})
export class SelectTestComponent {
   @Input() model: any;
   @Output() public changeModel: EventEmitter<any> = new EventEmitter();
}

Component.html:

<input [(ngModel)]="model" (ngModelChange)="changeModel.emit(model)" />

Parent.html:

<p>{{testData}}</p>
<select-test [(model)]="testData"></select-test> //TWO-WAY DATA BINDING
<select-test [model]="testData"></select-test> //OR ONE-WAY DATA BINDING

Answer 2

I find solution. Need change changeModel name to modelChange.