Modal Form Init / Re Render

Question

I'm trying to implement modal forms in my project.

In the link, If I click first button (Hello2), type something in input and then close modal. When I click first button again everything stays as is in the first time (because modal page not initialized). If I click on the second button (ngOnInit Sample) everything works as I expected.

But if you check app.component.html in the second sample nearly most of the code is written in app.component.html. I want to use like in the first sample (<hello2 #hello2Comp name="{{ name }}"></hello2>) but expecting to work like second sample. Re init my form in every open/show form.

Answer 1

In the Hello2 model on close button click you are removing only modal-body and so input1Modelstill hold the input you have provided and so it is rendering whenever you are rendering modal body.

But in other case every time HelloComponent is initializing and so input1Model in HelloComponent is also getting initialized.

So if you want to reset in Hello2Component just reset that variable in hideModal() method as this.input1Model = null. In case of form, you can call form initialization block.

Other Approach(as mentioned in comment) Edited_link