0

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.

SeanC
  • 1
  • 1
  • Can you please check this if this helps: https://stackoverflow.com/questions/59720829/angular-component-not-updating-when-input-changes-value – Mehtab Siddique Jan 02 '23 at 14:48

0 Answers0