Currently, I am working with Angular2 and have encountered a strange issue. I have a variable that I display on the page, and when a button is clicked, a data service is called to update the value of this variable. Surprisingly, even after changing the value within the dataservice call, the updated value is not reflected on the page until I navigate away from the page and back again. Any modifications made to the variable outside of the dataservice call are immediately displayed. Here's a snippet of the code:
HTML template:
<button type="button" class="btn (click)="clickNextButton()">
<span>save</span>
</button>
{{text}}
Typescript class
export class ConfigComponent implements OnInit {
public text = '';
..
..
private clickNextButton(): void {
this.text = 'abc';
this.dataService.getConfig()
.then((config: IConfig): void => {
console.log('printed');
this.text = 'xyz';
console.log('printed..');
});
}
}
After clicking the button, the text changes to 'abc' as expected, but it does not update to 'xyz'. Despite logging in the console showing that the code is being executed correctly, the variable change inside the dataservice call is not reflecting on the page. Can anyone suggest how to resolve this issue?
Update:
This problem seems to occur only when the component is nested within another component, like so:
<prod-setup
....
</prod-setup>
When I update a variable value within the dataservice call of the main component, it works fine and displays the new value. However, if the variable is updated within the dataservice call of the included component, the change is not reflected on the UI. Any insights or solutions to this scenario would be greatly appreciated.