Question: I have an input text box which use ngModel bind to a variable inside the component class. Upon clicking a button I want to clear the input text, however changing the variable value doesn't change the input text.

I have re-assign the variable and call detectChanges() from ChangeDetectorRef, but it still doesn't work. 

This is the template that I have

```
<form #beaconForm="ngForm" autocomplete="off">
        <input #searchBox
               id="search-query"
               name="search-query"
               [ngModel]="inputValue"
               (ngModelChange)="searchAutocomplete($event)"
               (keydown)="onKeyDown($event, searchBox)"
               (blur)="onBlur()"
               (focus)="onFocused(searchBox.value)">
        <button color="accent" mat-mini-fab (click)="action(searchBox.value)"><mat-icon>add</mat-icon></button>
</form>

```

Then on clicking action I want to do

```
private inputValue: string = "";

action(value) {
      this.inputValue = "";
      this.cd.detectChanges();
  }

```

I'm expecting this to clear the input, but it doesn't. Any idea where's my mistake?

Answer: 
After your comment I understand, why your doesn't work with one way binding.

Lets start with `inputValue = 1111`

On button click, which triggers `action()` method call, we set `inputValue` to `''`. Now whenever we change value in the input box directly, the value of the `inputValue` variable doesn't change since its one way variable bind. So now the value of `inputValue` stays as `''` even if the input box has some value in it. When we call `action()` it sets it back to `''`. But wait it was already `''`, so the view doesn't need to be updated (even doing a manual change detection won't work because angular will not see any change).

To fix your issue, either you can use, `[(ngModel)]` as suggested by everyone.
If you want to try out, you can still use `[ngModel]` but just update the value of the variable on input change.

Something like:

```
searchAutocomplete(e) {
  this.inputValue = e
  // rest of the code
}

```

But this is just for a clear understanding, we don't need this workaround if two way binding can solve the issue.

<https://stackblitz.com/edit/angular-rcdty6?file=src%2Fapp%2Fapp.component.html>
See the following working version:
<https://stackblitz.com/edit/angular-cqpqjj>

ts

```
  inputValue: string = "";

  action(value) {
      this.inputValue = "";
    }

```

html

```
<form #beaconForm="ngForm" autocomplete="off">
        <input #searchBox
               id="search-query"
               name="search-query"
               [(ngModel)]="inputValue">
        <button color="accent" mat-mini-fab (click)="action(searchBox.value)">add</button>
</form>
<span>#{{inputValue}}#</span>

```