How to bind css style from TypeScript method with Angular

Question

I have a component like this below:

@Component({
  selector: 'app-car-item',
  templateUrl: './car-item.component.html',
  styleUrls: ['./car-item.component.css'],
})
export class CarItemComponent {
  public style: string

  addStyle() {
    this.style = 'font-size: 20px'
  }

How can I implement addStyle() method to change size of font in car-item.component.css?

Answer 1

This is not how you do it in Angular! This is how you would do it:

In your CarItemComponent add a vairable for the font-size for example:

fontSize: number;

In your addStyle() set this number to the font size you want to use and in your template add this to the element which's font-size you want to change:

[style.font-size.px]="{{ fontSize }}"