CODEWITHSUNDEEP
angular
amallard
amallard

Reputation: 1229

Angular child component not updating after change detection

Perhaps I have the wrong setup from the beginning, but I'm having an issue with a child component @Input decorator not updating after the parent's variable has changed. My problem is that the parent's variable is actually getting updated in another child's component that is inherited from the parent.

Sub View Component

@Component({
  selector: 'sub-view',
  templateUrl: './sub-view.component.html',
  styleUrls: ['./sub-view.component.scss']
})
export class SubViewComponent {
  @Input() links;
  ...
}

Parent Component

@Component({
  selector: 'parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss']
})
export class ParentComponent {
  roleLinks:any;

  constructor() {}
  ...
}

Parent View

<sub-view 
    [links]="roleLinks" 
></sub-view>

Child Component #1

@Component({
  selector: 'child1',
  templateUrl: './child1.component.html',
  styleUrls: ['./child1.component.scss']
})
export class Child1Component extends ParentComponent {
  constructor() {
    super();
    this.roleLinks = [
      {key:'a',val:'A'},
      {key:'b',val:'B'}
    ];
  }
  ...
}

I have Child1Component extends ParentComponent because the idea is that I'll have a Child2, Child3 etc. Each child will have a lot of shared components with Parent

So the SubView will only need to be bound to Parent and then each Child Component will be able to have it's own links

However, I cannot get the links to update in SubView Looking at other SO Q/A's, I have tried the following:

And neither of them worked. links is always undefined inside SubView even though I can see that when it is changed inside Child the changes are actually making it down to Parent however SubView is just not detecting the changes

It may be worth noting that I have each Child component in a nested <router-outlet> within Parent Component.

-App
  <router-outlet>
    +Page1
    +Page2
    -Parent
      +SubView
      <router-outlet>
        +Child1
        +Child2
        +...
      +OtherSubView

StackBlitz example

https://stackblitz.com/edit/angular-f2qemh

Upvotes: 0

Views: 8894

Answers (1)

theMayer
theMayer

Reputation: 16177

So, I think the problem is that you are not assigning the roleLinks property in the parent component, but rather in the child component (where it is never used).

If you have the following template for parentComponent

<childComponent [links]="roleLinks></childComponent>

Then roleLinks will be assigned from the parent component to the child component. Class-based inheritance is irrelevant for assigning the roleLinks property on the original parent item.

Instead, you will need to assign this property directly, or, if you need state to be shared between parent and child, create an angular service with the data you need and inject it into both.

Upvotes: 2

Related Questions