Angular: Setting Styles on @Component dynamically-CodePudding

Angular 13

On my @Component I have this set up for dynamic values. Doesn't work

styles: [
    `
        .k-daterangepicker .k-dateinput {
            width: {{myWidth}};
        }
    `,
],

How do I change .k-daterangepicker .k-dateinput to a dynamic width for the @Component only?

CodePudding user response：

If your component template looks something like this:

<div >
    ...
</div>

you can add a style binding like this:

...
<div  [style.width]="inputWidth">
    ...
</div>
...

and in your typescript code for the template, you can change your inputWidth property in several different ways (one example follows):

...
export class MyComponent {
    @Input() inputWidth: string = '450px'; // Defaults to 450px
    ...
}