Separate SCSS and HTML in Angular

In the Angular2 project I need to apply some css to the button. I want to add a class in .html and describe all style attributes in .scss file but unfortunately this element "doesn't" see the class. However as soon as I add the same style as inline style in the .html file - everything works correctly.

I want to replace this code (from the snippet below, 5th line) [ngStyle]="{ position: 'absolute', 'z-index': '10', right: '0' }"

by this class="test-class" And use the data for the test-class from the .scss file.

The link to the stackblitz https://stackblitz.com/edit/angular-ivy-avvwha?file=src%2Fapp%2Fapp.component.html

.html

 <div>
  <gridster [options]="options">
    <gridster-item [item]="item" *ngFor="let item of dashboard">
      <div
        [ngStyle]="{ position: 'absolute', 'z-index': '10', right: '0' }"
      >
        <button mat-mini-fab>
          <mat-icon>delete</mat-icon>
        </button>
      </div>
      <ng-container>
        <div class="outline">
          <div class="header">
            <div class="header-text">Text</div>
          </div>
        </div>
      </ng-container>
    </gridster-item>
  </gridster>
</div>

.scss

.test-class {
  position: 'absolute';
  z-index: 10;
  right: 0;
}

Also maybe there is any other option to remove style from .html file and I overlooked it.

Thank you in advance!

Add test-class to your element:

<div class="test-class">
  <button mat-mini-fab>
    <mat-icon>delete</mat-icon>
  </button>
</div>

Second is your style should just be absolute, not 'absolute':

.test-class {
  position: absolute;
  z-index: 10;
  right: 0;
}

See here: https://stackblitz.com/edit/angular-ivy-z8wfaj?file=src%2Fapp%2Fapp.component.scss

In Scss file .. you put position: 'absolute'. abosulte should not be a string.

position: absolute;