-1

it's been a while since I didn't play with angular but I don't know what I'm doing wrong let's see what's the problem...

 <div class="container">
<div class="icon-container" [ngStyle]="setFontSize()">
  <div #1></div>
  <div class="shape" [ngClass]="shapeClass">
    <div #3></div>
    <div #4></div>
  </div>
  <div #5></div>
  <div #6></div>
</div>

<mat-slider
  thumbLabel
  [displayWith]="formatLabel"
  tickInterval="1"
  step="1"
  min="10"
  max="30"
  aria-label="units"
  [(value)]="sliderValue"
></mat-slider>
</div>

Ok, what I'm trying to accomplish here is to use the <mat-slider> value to automatically change the font-size of the <div class="icon-container" [ngStyle]="setFontSize()"> modifying their childs as their sizes are set as em.

.TS

sliderValue: number;

  constructor() {
    this.sliderValue = 10;
  }
public setFontSize() {
    let styles = {
      'font-size': this.sliderValue + 'px!important;',
      'backgroud-color': 'red;',
    };
    console.log(styles);
    return styles;
  }
public formatLabel(value: number) {
if (value >= 1) {
  return value + 'px';
}

return value;
}

Having seen this which seems normal to me, you can refer to StackBlitz demo, please open the console to see the propagation issue, and also look at the Element inspector for the ngStyle missing property!

StackBlitz

Arcall
  • 1
  • 1
  • Works just fine if you remove the `!important` and the semicolons. You also have a typo in the `background-color` property, check that one out. – Octavian Mărculescu Mar 18 '22 at 13:20
  • Nice seen, although you are right, there's still the triggering problem, why is it triggering that much? just placing the mouse in mat-slide without clicking, it will cause a trigger, why is that and how to solve it! @OctavianMărculescu – Arcall Mar 18 '22 at 16:10
  • That is happening because how change detection works. At every cycle, it will compare the current values of the bindings with the previous ones, and since you have a function there that always returns a new object, it will be picked up as a change (even though it's "the same"). Have a look at this updated [StackBlitz](https://angular-ivy-hng44l.stackblitz.io). – Octavian Mărculescu Mar 18 '22 at 16:24
  • @OctavianMărculescu The link is not broken but i'm unable to load the dev server for your project – Arcall Mar 18 '22 at 23:33

1 Answers1

0

Now that I have had more time, I solved this by using the following approach, please feel free to post better answers I'll mark best solution as correct.

  • My approach:

HTML

<div class="icon-container"  [style.font-size.px]="sliderValue">
  <div #1></div>
  <div class="shape" [ngClass]="shapeClass">
    <div #3></div>
    <div #4></div>
  </div>
  <div #5></div>
  <div #6></div>
</div>
<mat-slider
        [disabled]="isTruck"
        #slider
        thumbLabel
        [displayWith]="formatLabel"
        tickInterval="1"
        step="1"
        min="10"
        max="50"
        aria-label="units"
        [(ngModel)]="sliderValue"
      ></mat-slider>

TS:

sliderValue: number;

constructor() {
  this.sliderValue = 10;
}

This works for me, I hope it helps someone.

Arcall
  • 1
  • 1