Angular: Setting Styles on @Component dynamically

Question

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?

Answer 1

If your component template looks something like this:

<div class="k-daterangepicker k-dateinput">
    ...
</div>

you can add a style binding like this:

...
<div class="k-daterangepicker k-dateinput" [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
    ...
}