javascript - Angular5 - Change parent's property from child component's input's [(ngModel)] binding - St

I have already looked at this similar question without success. The plunker mentioned in the question seems to be broken.

I am trying to update parent ponent's property from child ponent's [(ngModel)] binding.

This is the child ponents HTML:

<div class="elastic-textarea">
    <ion-input rows="1"  [value]="inputValue" [(ngModel)]="inputValue" (ngModelChange)="change($event)" ></ion-input>
    </div>

This is the child ponents TS:

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

@Component({
  selector: 'app-childinput',
  templateUrl: './childinputponent.html',
  styleUrls: ['./childinputponent.css']
})
export class ChildinputComponent  {
@Input() inputValue: string;
  @Output() emitInputValue = new EventEmitter();
  constructor() { }

change(newValue) {
    console.log('newvalue', newValue)
    this.inputValue = newValue;
    this.emitInputValue.emit(newValue);
  }
}

This is how I'm using the child ponent in the parent ponent:

<app-childinput [(inputValue)]="thevalue" ></app-childinput>
<p>The changed value should be reflected here: {{thevalue}}</p>

Here is a STACKBLITZ demonstrating the issue. The parent ponent is the page callled "home", and the child ponent is the ponent called "childinput."

Am I doing something wrong or is this simply not possible anymore in Angular?

I have already looked at this similar question without success. The plunker mentioned in the question seems to be broken.

I am trying to update parent ponent's property from child ponent's [(ngModel)] binding.

This is the child ponents HTML:

<div class="elastic-textarea">
    <ion-input rows="1"  [value]="inputValue" [(ngModel)]="inputValue" (ngModelChange)="change($event)" ></ion-input>
    </div>

This is the child ponents TS:

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

@Component({
  selector: 'app-childinput',
  templateUrl: './childinput.ponent.html',
  styleUrls: ['./childinput.ponent.css']
})
export class ChildinputComponent  {
@Input() inputValue: string;
  @Output() emitInputValue = new EventEmitter();
  constructor() { }

change(newValue) {
    console.log('newvalue', newValue)
    this.inputValue = newValue;
    this.emitInputValue.emit(newValue);
  }
}

This is how I'm using the child ponent in the parent ponent:

<app-childinput [(inputValue)]="thevalue" ></app-childinput>
<p>The changed value should be reflected here: {{thevalue}}</p>

Here is a STACKBLITZ demonstrating the issue. The parent ponent is the page callled "home", and the child ponent is the ponent called "childinput."

Am I doing something wrong or is this simply not possible anymore in Angular?

• javascript
• angular
• typescript
• ionic-framework
• ionic3

Share Improve this question Follow asked Aug 29, 2018 at 15:53 GeForce RTX 4090GeForce RTX 4090 3,5181212 gold badges3636 silver badges6565 bronze badges 1

• inputValue marked with Input decorator, it should be used as [inputValue]="thevalue" – Haifeng Zhang Commented Aug 29, 2018 at 15:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Just change emitInputValue to inputValueChange.

Fixed Stackblitz

childinput.ponent.html

<div class="elastic-textarea">
    <ion-input rows="1"  [value]="inputValue" [ngModel]="inputValue" (ngModelChange)="change($event)" ></ion-input>
</div>

home.html and home.ts change

<app-childinput [(inputValue)]="thevalue" ></app-childinput>

to

<app-childinput [inputValue]="thevalue" (emitInputValue)="update($event)" ></app-childinput>


update(event) {
    this.thevalue = event;
  }

You declared Output EventEmitter emitInputValue, you didn't emit it properly. [(ngModel)] is two way binding which you mixed it with your Input decorator inputValue