How to access css classes in typescript file?

Question

Here I want to add CSS classes dynamically to the element using ngClass directive in angular.js.

<p [ngClass]="addClasses()">testing content</p>

and below is my ts code:

isbold: boolean = false;
isItalic: boolean = true;

addClasses() {
   let classes = {
      boldClass: this.isbold,
      italicsClass: this.isItalic
   };
   return classes;
}

boldClass and italicsClass are two classes in my css file, these classes should apply depending on the value in the corresponding boolean variables. But I'm getting the error as Can not find name for both boldClass and italicsClass. Any help appreciated.

what exactly are you doing? you wan to add either bold or italic class to the <p> tag? — Sujan Gainju
– Sujan Gainju, Commented Jul 18, 2018 at 18:59
You don't use = in an object literal, you use :. So boldClass: this.isbold, for instance. — Heretic Monkey
– Heretic Monkey, Commented Jul 18, 2018 at 18:59

Shardul · Accepted Answer · 2018-07-18 19:00:48Z

2

This is one way you can add dynamic classes

<p [class.boldClass]="isbold"
   [class.italicsClass]="isItalic">testing content </p>

answered Jul 18, 2018 at 19:00

Shardul

1,0121 gold badge13 silver badges19 bronze badges

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

Comments

Joseph Arriaza · Accepted Answer · 2018-07-18 19:02:09Z

2

The issue is with your JSON, when you declare a JSON, the properties of it shouldn't be with the "=", try to use something like:

addClasses(){
  let classes={
    boldClass: this.isbold,
    italicsClass: this.isItalic
  };
  return classes;
}

There was a pending "," after this.isbold, and also, you had this.Italic, and it should be this.isItalic.

answered Jul 18, 2018 at 19:02

Joseph Arriaza

13.9k23 gold badges47 silver badges65 bronze badges

Comments

andrew ferguson · Accepted Answer · 2018-07-18 19:04:14Z

1

Try using Angular's Renderer2

@ViewChild('el') element: ElementRef
constructor(private renderer: Renderer2) {
}

addClasses(classes: Array<string>){
  classes.forEach(class => this.renderer.addClass(this.element.nativeElement, 'someClass'))

}



 <p #el>testing content </p>

answered Jul 18, 2018 at 19:04

andrew ferguson

1893 bronze badges

Comments

kboul · Accepted Answer · 2019-02-13 10:25:10Z

1

ts:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  isbold: boolean = false;
  isItalic: boolean = true;

  addClasses() {
     let classes = {
       boldClass: this.isbold,
       italicsClass: this.isItalic
     };
     return classes;
   }
}

template:

<p [ngClass]="addClasses()">testing content </p>

css:

.boldClass {
   font-weight: bold;
}

.italicsClass {
   font-style: italic;
}

Demo

edited Feb 13, 2019 at 10:25

answered Jul 18, 2018 at 19:33

kboul

14.7k5 gold badges50 silver badges60 bronze badges

Comments

Deepender Sharma · Accepted Answer · 2018-07-18 19:01:04Z

-1

[ngClass]="{'italicsClass':isItalic,'boldClass':isbold}"

answered Jul 18, 2018 at 19:01

Deepender Sharma

4901 gold badge7 silver badges26 bronze badges

Collectives™ on Stack Overflow

How to access css classes in typescript file?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related