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?

Angular reference. @HostBinding('style.width.px') get size() { return 450; }. Not in the component decorator, but inside the component class itself — Pieterjan
– Pieterjan, Commented May 11, 2022 at 18:08
I am looking to change the definition of this CSS classes selector:" .k-daterangepicker .k-dateinput" — Ian Vink
– Ian Vink, Commented May 11, 2022 at 18:16

Jake Smith · Accepted Answer · 2022-05-11 18:55:37Z

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
    ...
}

answered May 11, 2022 at 18:55

Jake Smith

2,7322 gold badges35 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

William Over a year ago

how about if we are not allowed to add style inline? What I mean is there any way to make width: {{myWidth}}; dynamic in which we can assign myWidth in the component only?

Jake Smith Over a year ago

I'm not sure what you mean, but inside MyComponent, you have inputWidth as a public property that is also marked as an Input so you can dynamically change this value either inside the my-component.component.ts file or from a parent component's template using the Input binding syntax. '450px' is just the default value in case you decide not to set the width to anything at first. If this doesn't answer you question, please feel free to re-word it another way

William Over a year ago

Let's say that your component has two div children of the main div, the first child has ".first" class, and the second child has ".second" class. Let say that in each class there's a dynamic property. How can we do that?

Collectives™ on Stack Overflow

Angular: Setting Styles on @Component dynamically

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related