Two Way Binding doubt in Angular

1

Hi! I hope this is the right place(and the right tag) to ask for help on this. Please let me know if this isn’t!

So I’ve been playing around with angular and I learned about two way binding using “ngModel”. I got this idea, but I can’t seem to implement it, would appreciate any help on this:

What I’m trying to do: So I will have an input field, that’ll take ticket prices for “Adult”, and a similar one for “Child”. I have another two input fields that’ll calculate the ticket prices based on the fixed rates. Then I want a third field where the sum of both their calculated prices is printed. I’ve tried this so far, and it does work, but I was wondering if there was any other, way I could do this? Something cleaner.

here’s the code:

<input type="text" [(ngModel)]="ticket.adult" name="adult">
  <input type="text" value="{{ ticket.adult*15 }}">

<input type="text" [(ngModel)]="ticket.child" name="child">
   <input type="text" value="{{ ticket.child*5 }}">


<p>Ticket Price:{{ this.ticket.child*5--this.ticket.adult*15 }}</p>
2

Forms in Angular are a little confusing, especially trying to understand the distinction between template-driven forms and reactive forms. There are a lot of live examples on the official docs. I suggest opening those and interacting with them.

1 Like