Resize div in Angular 6

Question

I am working on Angular resize element

using : https://github.com/mattlewis92/angular-resizable-element

My Module

import { ResizableModule } from 'angular-resizable-element';

@NgModule({
  imports: [ResizableModule],
})

My Component TS

import { ResizeEvent } from 'angular-resizable-element';

My Component HTML

<div
    mwlResizable
    [enableGhostResize]="true"
    [resizeEdges]="{bottom: true, right: true, top: true, left: true}"
    (resizeEnd)="onResizeEnd($event)">
</div>

When i rezie element its reverting to the old dimension.

i dint configured styles which they suggested in documentation.

i am using styleUrls, where are they given syntax for style, is showing syntax error.

@Component({
  selector: 'app-widgets',
  templateUrl: './widgets.component.html',
  styleUrls: ['./widgets.component.scss',
  [mwlResizable] {
    box-sizing: border-box;
  }
],
  encapsulation: ViewEncapsulation.None
})

Can any one provide the proper syntax to define styles in my app.

Any help is appreciated.

Answer 1

As Angular doc says, it is not possible to combine styles and styleUrls:

By setting styles or styleUrls metadata

In addition, you wrote incorrectly attribute in your CSS. It should be in square brackets:

[mwlResizable] {
    box-sizing: border-box; 
}