How to detect changes on @Input string

Question

I have the following code in my child component:

Component

@Input() query: string;

ngOnChanges(changes) {
   if (changes['query']) {
     console.log('query is now: ', this.query);
   }
}

Template

<input type="text" [(ngModel)]="query">

Then in my parent component I have the following: 1. Template

<my-input 
   (onSearch)="searchSelected($event)"             
   [searchTerm]="selectedSearch">
</my-input>

<span>search is: {{selectedSearch}}</span>

My problem is whenever I type in my-input component it never updates selectedSearch in the parent. Also, when I set selectedSearch in the parent component it does not get updated on the child (ngOnChanges does not trigger also). What am I doing wrong?

Need either code of two components that you have problem with or StackBlitz — Sergey
– Sergey, Commented Aug 6, 2019 at 21:06

Morphyish · Accepted Answer · 2019-08-06 21:09:49Z

1

You child component is expecting a query input. You are giving it a seachTerm props when using it.

You need to change the input name to

@Input() searchTerm: string;

or modify how you are using the component to use the correct input

<my-input [query]="selectedSearch"></my-input>

Onto the output now. You actually need to create an output on your child component

@Output() onSearch = new EventEmitter<string>();

And then call the EventEmitter when you want the onSearch prop to trigger

this.onSearch.emit(my_value)

You can find more documentation on the subject here:

https://angular.io/guide/component-interaction

answered Aug 6, 2019 at 21:09

Morphyish

4,07210 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eduardo Vargas · Accepted Answer · 2019-08-06 21:09:58Z

0

You can use get/set

  private _query

  @Input()
  get query(): string {
    return this._query;
  }

  set query(value: string) {
    this._query= value;
    // do some logic on set
  }

answered Aug 6, 2019 at 21:09

Eduardo Vargas

9,5022 gold badges22 silver badges30 bronze badges

1 Comment

Morphyish Over a year ago

This isn't the issue here, its both components not communicating properly through inputs/outputs

Collectives™ on Stack Overflow

How to detect changes on @Input string

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related