Angular - MatSlider propagating too much, also ngStyle not working (StackBlitz Available)

Question

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

Answer 1

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.