0

How do I reset my component property value while my RouteParams change

i am having one checkbox in my component , that component i have used in routing with parameter.

Detail Component having myProp property which is assigned to my checkbox .

Ex:
1. myapp/detail/1
2. myapp/detail/2

The problem is when i am in checking the checkbox in one route and i am navigating to same route with different param the check box checked remains the same .

How to reset the checkbox selection while navigation between the same routes with different param?

While consoling the property on the life cycle hook events giving default value[false] but the checkbox is checked on the view

My Stackblitz code

James Z
  • 12,209
  • 10
  • 24
  • 44
Sathya V
  • 589
  • 3
  • 7
  • 15
  • https://stackoverflow.com/questions/46050849/what-is-the-difference-between-activatedroute-and-activatedroutesnapshot-in-angu – dee zg Mar 14 '18 at 17:33

1 Answers1

1

The binding of the checkbox is not two-way bound.

Try this:

<input type="checkbox" [(ngModel)]="myProp" /> MyCheckbox
DeborahK
  • 57,520
  • 12
  • 104
  • 129
  • Thanks for the solution . Will it work without resetting on the route paramMap Subscribe Event. And i have one more doubt like we have one [(ngModel)]="templateModel" in template part which is not defined in the component ts file will it work ? – Sathya V Mar 14 '18 at 17:48
  • You do have to reset it manually. If you change the route without changing the component, the component is not reinitialized. So you have to manually reset anything you need reset in the subscribe as you have in your Stackblitz. I don't understand the second question. – DeborahK Mar 14 '18 at 17:51
  • @ Sathya V Two-way Binding is the synchronization between the model and the view. When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well. so the answer to your second question is NO it won't work. – Vikas Mar 14 '18 at 18:05
  • @DeborahK Thanks for the clarification. I am a excepting the new plural sight course for Angular 5 i18N, service workers , server side rendering if possible . Once again Thanks you so much – Sathya V Mar 14 '18 at 18:10
  • @Vikas Thanks For the clarification now i understood clearly . Thanks once again – Sathya V Mar 14 '18 at 18:12