-2

I am trying to use [ngClass] in Angular and seems like it is not getting applied. Surprising [ngStyle] for similar css styles are working. Waht am I doing wrong here? There is no error in the console. When I do check the dev tools the classes are being applied to the tag but not in the browser view. I have tried all different options - class, [class], [ngClass], ngClass. I have also tried both className and ngClass.

Please find the plunker attached for reference:

https://plnkr.co/edit/ipMxdTzoHUl5YCPJSpLT?p=preview

@Component({
    selector: 'aboutus',
    template:`
        <span class="classone classtwo">{{vari.title}}</span>
        <br>
        <div ngClass="['classone','classtwo']">{{vari.title}}</div>
         <br>
         <div [ngClass]="['classone','classtwo']">{{vari.title}}</div>
        <br>
        <div [className]="classdef">{{vari.title}}</div>
    `,
    styles: [`
        .classone{
            font-weight: 'normal' !important;
        }
        .classtwo{
            font-size: '40px' !important;
        }
        `
    ]
})
export class AboutusComponent implements OnInit, OnDestroy {
    vari: any = {title: 'test'}
    classdef: any[] = ['classone', 'classtwo']
    constructor() { }

}
Gary
  • 2,293
  • 2
  • 25
  • 47
  • If you can see the classes being applied to the tag in the style inspector, then the problem does not lie in Angular, but more likely how the classes `classone` etc. are defined. What are they supposed to do? Can you see the individual properties within the rule selected by that class being displayed properly, with no typos, and not crossed out (meaning overridden for some reason)? For more help, you could provide the CSS, or add a screenshot of the DOM inspector + style inspector. –  Jun 10 '17 at 12:36
  • I dont see a problem and your answer does not help. It seems like angular issue. The same styles with ngStyle gets applied. Can you check the plunker in my updated question? Is there a code issue in my implementation? – Gary Jun 10 '17 at 12:45
  • It's not an answer, it's a comment. Anyway, the problem was exactly what I said--it's **NOT** an Angular issue, it's an issue with how the classes are defined, and merely looking at the style inspector and seeing that the `font-size` etc. rules were marked as invalid would have instantly revealed the problem. You could have gotten an answer a lot more quickly if you had included the CSS in your question--you know, the "C"(complete) in MCVE. –  Jun 10 '17 at 13:19
  • No worries. I appreciate any effort. I wanted to know exactly was breaking on my code. Thank you very much for your time. – Gary Jun 10 '17 at 14:51

2 Answers2

1

Issue is in your css.

replace this 

  .classtwo{
        font-size: '40px' !important;
    }

to 

 .classtwo{
        font-size: 40px !important;
    }

//our root app component

    import {Component, NgModule, VERSION, OnInit, OnDestroy} from '@angular/core'
    import {BrowserModule} from '@angular/platform-browser'
    import {CommonModule} from '@angular/common'
    @Component({
        selector: 'my-app',
        template:`
            <span class="classone classtwo">{{vari.title}}</span>
            <br>
            <div ngClass="['classone','classtwo']">{{vari.title}}</div>
            <br>
            <div [ngClass]="['classone','classtwo']">{{vari.title}}</div>
            <br>
            <div [className]="classdef">{{vari.title}}</div>
        `,
        styles: [`
            .classone{
                font-weight: normal !important;
            }
            .classtwo{
                font-size: 40px !important;
            }
            `
        ]
    })

https://plnkr.co/edit/acLvnOvezEFI4EXjKbVx?p=preview

Vel
  • 9,027
  • 6
  • 34
  • 66
-2

i am creating plunker it will help you

code in your html

<div>
      <h2 [ngClass]='{"active":true}'>Hello {{name}}</h2>
    </div>
paruvelly Vishwanath
  • 1,202
  • 3
  • 14
  • 30