3

I'm using Golden-layout in my Angular 7 app to display some components as widgets in widget grid. And all widgets have ability to resize. I need, for example, increse or make smaller font-size while i resizing widget.

I tried to use vw for ineer content and other stuff that is common for resizing window. But it didn't work because it depends on viewport and my viewport still the same, just changed size of widget.

Are there any options to make content inside widgets responsive?

Here is example on stackblitz (not mine) - https://stackblitz.com/edit/angular-4aughc

hofshteyn
  • 1,272
  • 4
  • 16
  • 33

1 Answers1

0

In golden-layout, you can listen to the resize event of a container and then apply any changes you'd like once it's triggered.

export class MyComponent {

    constructor(@Inject("Container") public container: Container) { 
        container.on('resize', () => {
            this.resize();
        });
    }

    resize() {
        if ($('.my-component').width() < 500) {
            $('.my-component').addClass('smallText');
        } else {
            $('.my-component').removeClass('smallText');
        }
    }

}

This would allow you to do things based off of the parent container size instead of the window size.

cs_pupil
  • 2,782
  • 27
  • 39