Parent Component
<user-settings #userSettings [isexpanded]="isexpanded"></user-settings>
Child Component
<mgt-login id="loggedInUser" (loginCompleted)="loginCompleted($event)">
<template data-type="signed-in-button-content" *ngIf="!isexpanded">
<mgt-person person-query="me"></mgt-person>
</template>
When the value of the isexpanded
property changes in the parent component, it gets passed to the child/mgt-login/template successfully.
But then the template component is not updating and showing/hiding itself without having to be clicked on. Once clicked on it updates and changes display like it should.
I am needing to get it to display/hide automatically when the property value changes in the parent.
I have tried to implement NgOnChange within the child component with a console.log to make sure the prop changes make it all the way through and it worked, but did not force it to refresh the component and display correctly.
I have tried ChangeDetectionStrategy.default to .onpush but that did not make any difference either.
I am starting to think that it has something to do with the mgt template and its properties or the mgt-login component.