Angular child component variable not updating when called from parent component

Question

I am having issues dynamically updating an elements style.

I am overlaying some margins on top of an image. I created a child component to handle this. I call a function on my child component which calculates the margins and then sets a variable.

Here is the parent component call, which is triggered by a button click.

showMargins() {
    if (this.showingMargins) {

        this.showingMargins = false;
    } else {
        this.showingMargins = true;
        this.marginComponent.calculateMargins();
    }
}

And here is my child component:

marginStyles: any = {};
...
calculateMargins() {
    //logic 
    ...
    //set the property
    this.marginStyles = {
       'height.px': height,
       'margin-left.px': left
    }
}

And then in my template

<div id="margin-left" [ngStyle]="marginStyles">

I've tried using a function as well

private leftDiv() {
    debugger;
    return this.marginStyles;
}

thus changing my template to

<div id="margin-left" [ngStyle]="leftDiv()">

but to no avail. If I hardcode the values when I declare the variable it works fine.

    marginStyles: any = {'height.px': 200, 'margin-left.px': 20};

And if I hardcode it in the template it works fine as well; it's just failing after I've done my calculations and won't render the lines that I'm overlaying. Where have I gone wrong? If it helps, I'm on Angular 4.

Edit: I moved all of my logic to my parent component, and everything looks fine. It appears to me that the values I am for marginStyle are not being updated in the child component, which is baffling to me. They should be updating. ngStyle is working fine, it's the variable that is not being updated.

Could you provide small demo on stackblitz.com/fork/angular ? — Sergey Mell
– Sergey Mell, Commented Jan 9, 2019 at 17:13
return this.leftMarginStyles; or return this.marginStyles; ? — phucnh
– phucnh, Commented Jan 9, 2019 at 17:17
Try showing the style in the view with <div>{{ marginStyles | json }}</div>. It may not be in a valid state (height and left may not be valid numbers in your code). — Martin Parenteau
– Martin Parenteau, Commented Jan 9, 2019 at 17:18

Sergey Mell · Accepted Answer · 2019-01-09 17:35:07Z

2

I've implemented the similar code

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

and it seems to be working as expected. Please, check for the differences. Pay attention to the Element referencing by means of ViewChild decorator, all functions should be public, ElementRef type is the referencing component class because of typization.

edited Jan 9, 2019 at 17:35

answered Jan 9, 2019 at 17:29

Sergey Mell

8,0501 gold badge29 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sparkyShorts Over a year ago

Beat me to it, that's essentially what I am doing.

sparkyShorts Over a year ago

I'm not seeing a difference in my source code vs what we've implemented in stackblitz, which is confusing to me why it'd work there but not in my project

phucnh · Accepted Answer · 2019-01-09 17:32:37Z

0

I think you should return marginStyles instead of leftMarginStyles

answered Jan 9, 2019 at 17:32

phucnh

1,1156 silver badges14 bronze badges

Collectives™ on Stack Overflow

Angular child component variable not updating when called from parent component

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related