CODEWITHSUNDEEP
angulartypescript
Luki
Luki

Reputation: 447

How to bind css style from TypeScript method with Angular

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?

Upvotes: 6

Views: 32974

Answers (2)

elpezganzo
elpezganzo

Reputation: 367

This could be useful (Angular 6):

  1. Change styles in order to look like disabled
  2. Eliminate the href

https://stackblitz.com/edit/angular-wzgr4h

Upvotes: 0

tommueller
tommueller

Reputation: 2496

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

Upvotes: 5

Related Questions