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?

I believe you are best using the ngStyle directive to pass an object from your html element to your typescript (conditionally if you wish) — Single Entity
– Single Entity, Commented Aug 22, 2018 at 21:24
Or you can use ViewChild directive to access the element of interest in your DOM and apply a style that way — Single Entity
– Single Entity, Commented Aug 23, 2018 at 8:19

tommueller · Accepted Answer · 2017-09-27 10:30:18Z

5

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

answered Sep 27, 2017 at 10:30

tommueller

2,5263 gold badges33 silver badges50 bronze badges

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

2 Comments

Luki Over a year ago

Sorry, I'm newbie in Angular. Where exactly do I have to add this line: [style.font-size.px]="{{ fontSize }}" ?

tommueller Over a year ago

In your template on the element whichs font-size you want to change: <div [style.font-size.px]="{{ fontSize }}">content</div>

elpezganzo · Accepted Answer · 2019-04-12 15:37:34Z

0

This could be useful (Angular 6):

Change styles in order to look like disabled
Eliminate the href

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

answered Apr 12, 2019 at 15:37

elpezganzo

3874 silver badges8 bronze badges

Collectives™ on Stack Overflow

How to bind css style from TypeScript method with Angular

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related