I have the following ponent:

export class ModuleComponentComponent implements OnInit {
    dropzoneConf;
    fileService = environment.getFileUrl;

    constructor(
        private moduleComponentService: ModuleComponentService) {
    }

    @Input()
    selectedComponent: ModuleComponent;

    ngOnInit() {
        this.setDropZoneConfig();
    }    
}

And in that I have the following HTML:

<h3 class="m-portlet__head-text m--font-success">
   <input class="form-control" type="text" [ngModel]="selectedComponent.title" />
</h3>

and the way I add the ponent in my HTML:

<div class="col-lg-8 col-x1-12" *ngIf="selectedComponent != null">
   <app-module-ponent [selectedComponent]="selectedComponent"></app-module-ponent>
</div>

When I type something into the input field it doesn't update the selectedComponent.title variable

What might be going on?

I have the following ponent:

export class ModuleComponentComponent implements OnInit {
    dropzoneConf;
    fileService = environment.getFileUrl;

    constructor(
        private moduleComponentService: ModuleComponentService) {
    }

    @Input()
    selectedComponent: ModuleComponent;

    ngOnInit() {
        this.setDropZoneConfig();
    }    
}

And in that I have the following HTML:

<h3 class="m-portlet__head-text m--font-success">
   <input class="form-control" type="text" [ngModel]="selectedComponent.title" />
</h3>

and the way I add the ponent in my HTML:

<div class="col-lg-8 col-x1-12" *ngIf="selectedComponent != null">
   <app-module-ponent [selectedComponent]="selectedComponent"></app-module-ponent>
</div>

When I type something into the input field it doesn't update the selectedComponent.title variable

What might be going on?

• javascript
• angular
• angular5
• ngmodel

3 Answers 3

Use the two way binding

 [(ngModel)]="selectedComponent.title"

We need to use two way data binding with [(ngModel)]

<h3 class="m-portlet__head-text m--font-success">
   <input class="form-control" type="text" [(ngModel)]="selectedComponent.title" />
</h3>

You should read the part about two way data binding on Angular documentation

If you want to use [ngModel] only, you could but you have to catch changes with (ngModelChange)

<h3 class="m-portlet__head-text m--font-success">
   <input class="form-control" type="text" [ngModel]="selectedComponent.title" (ngModelChanges)="setTitle($event)" />
</h3>

You could improve it with forms, just ask me for any questions about that

you should use two-way data binding

[(ngModel)]

<input class="form-control" type="text" [(ngModel)]="selectedComponent.title" />

and make sure to import forms module in app.module.ts

import { FormsModule } from '@angular/forms';