CODEWITHSUNDEEP
angularrxjsangular8
Nestor
Nestor

Reputation: 73

in input onchange event, update array inside the component

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

Upvotes: 0

Views: 1165

Answers (2)

Keryanie
Keryanie

Reputation: 715

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).

Upvotes: 1

Sarjerao Ghadage
Sarjerao Ghadage

Reputation: 1544

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.

Upvotes: 0

Related Questions