in input onchange event, update array inside the component

Question

I'm starting to learn angular right now, and trying to understand the concept of an Observable and how to use them.

I've read all that there is about them in the angular documentation, but I'm either not understanding the concept correctly, or if just not possible.

I'll explain my idea:

I have an input element:

<div class="response" *ngFor="let reply of currentResponse.replies">
    <input style="word-break: break-all;" type="text" placeholder="Message" value="{{ reply.text }}"/>
</div>

and in the component as a property:

fileData: ResponseModel[];
// and
currentResponse: ResponseModel

ResponseModel as context:

class ResponseModel {
    constructor(
        public id: string,
        public replies: Array<Reply>,
        public suggestedActions: [],
        public inputHint: string
    ) {}
}

My idea:

could it be possible to attach the onchange event of the input to the fileData array or the currentResponse property, so that when a value changes in the input, the value will change in the array.

And then, when a value changes in the fileData array, update the service that is populating it.

Or If I've misunderstood the use of Observable.

Thanks, Nestor

what does this have to do with observables?

AVJT82
– AVJT82

2020-01-22 17:40:57 +00:00
Commented Jan 22, 2020 at 17:40 — AVJT82
– AVJT82, Commented Jan 22, 2020 at 17:40

Keryanie · Accepted Answer · 2020-01-22 14:02:03Z

1

You can use angular two ways binding [(ngModel)]:

<input [(ngModel)]="yourVariableName"><input>

The variable should be a string type. So Input is related to that variable, whenever you change that variable the text inside input will update and vice-versa(when you write inside input will update the variable).

answered Jan 22, 2020 at 14:02

Keryanie

7257 silver badges19 bronze badges

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

1 Comment

Nestor Over a year ago

That's exactly what I was looking for! Thanks

Sarjerao Ghadage · Accepted Answer · 2020-01-22 14:00:52Z

0

The array contains references to the objects.when you bind the array item to value value="{{ reply.text }}" the references of currentResponse.replies is attached to this.so when you update the value of input box it automatically update the array.

answered Jan 22, 2020 at 14:00

Sarjerao Ghadage

1,55616 silver badges38 bronze badges

Collectives™ on Stack Overflow

in input onchange event, update array inside the component

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related