How to detect save and tab change event using angular8 with bootstrap4

Question

i have used bootstrap4 tabs in angular8. Now if i have not filled details in first tab, (ie) user tab and click on submit, then the other tab must be disabled, once the submit button is click then the other tab must be enabled. Here based on click of other tab, the contents in the other tab must be loaded, if other tab is not clicked, then the details in others tab must not be filled. I have tried by using click event and tabChange event, but everything works in app.component but the data doesnt come to the user or other tab based on click on other tab.

I am not getting anyway to move forward, i have even used event emitters and storage inside the app, through service files, but nothing worked for me.

Demo

Answer 1

I looked at your Demo and I think I understand your problem. I personally am a fan of using ReplaySubjects, and EventEmitters to pass data up and down through my components. Here is a working demo :
Working Demo
Let me know if it is not what you were looking for.