Angular add class to component from component css file

Question

I want to add a class to my component when I click a button. So I do it with Renderer2 as following:

this.renderer.addClass(this.elRef.nativeElement, 'photo-removing');

The class only applies when I add the css class in a global css file. It doesn't work when I add it to the component css file. Any idea why does this happen?

Update: Here is my component html:

<div *ngIf="imgMainUrl">
    <img
        [src]="imgMainUrl"
        [style.width.px]="width" [style.height.px]="height"
        [ngClass]="{ 'img-radius' : rounded }"
    >
    <i
        [pTooltip]="tooltipTxt" [tooltipPosition]="tooltipPosition"
        class="icon-close close-btn"
        (click)="removePhoto()">
    </i>
</div>

And css:

.photo-removing {
    opacity: 0.4;
    border:1px solid red;
}

ngClass is a much more Angular way of doing this. On your component you would just have some logic that applies the class when the button is clicked. I can provide a more detailed answer if you'd rather do it this way. — caden311
– caden311, Commented Jul 9, 2019 at 21:19
we'd need to see more about the template structure and the css itself to understand why the it's only working when defined in the global css context. — bryan60
– bryan60, Commented Jul 9, 2019 at 21:31
And you’re trying to put the css in this component style sheet? Not a parent component? — bryan60
– bryan60, Commented Jul 10, 2019 at 12:26
@bryan60 Yes exactly. And one more thing, this component is a shared module's component which will be used in main modules. — Vahid Najafi
– Vahid Najafi, Commented Jul 10, 2019 at 13:06

Falyoun · Accepted Answer · 2019-07-09 21:21:46Z

1

You can use [ngClass] with *ngIf instead

In .html:

<button (click)="buttonClicked()"></button>

<div [ngClass]={checker === true ? 'photo-removing' : ''}></div>

And in .ts file:

export class Home{

  checker:boolean = false;
  constructor(){}


  buttonClicked() {
   this.checker = !this.checker;
  }
}

answered Jul 9, 2019 at 21:21

Falyoun

4,0114 gold badges21 silver badges52 bronze badges

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

1 Comment

Vahid Najafi Over a year ago

Thanks, I know I can use ngClass, but I just want to know the reason.

c__money · Accepted Answer · 2019-07-10 15:49:27Z

1

This is a perfect example of when to use [ngClass] directive.

If you're simply using the button to toggle some variable, you can do this...

In your component.ts file:

public clicked: boolean = false;

click() {
     this.clicked ? false : true;
}

In your component.html file:

<button (click)="click()">Set to {{!clicked}}</button>

<div [ngClass]="{'your-class' : clicked}"></div>

If you really want to use a renderer, the you need to set this code in your angular app:

encapsulation: ViewEncapsulation.None.

By setting this value to None, you are telling Angular not to encapsulate your views. That way, the default scoping rules, isolations, and protections for styling won't apply. So, Angular adds the CSS to the global styles. This is essentially the same as pasting the component's styles into the HTML.

https://angular.io/api/core/ViewEncapsulation

edited Jul 10, 2019 at 15:49

answered Jul 9, 2019 at 21:38

c__money

762 bronze badges

2 Comments

Vahid Najafi Over a year ago

Thanks, I know I can use ngClass, but I just want to know the reason.

c__money Over a year ago

Please see my updated answer ^ it has to do with view encapsulation.

Manzer A · Accepted Answer · 2019-07-10 16:59:02Z

1

Try:-

Stackblitz Link:- https://stackblitz.com/edit/renderer2-example-2-wdz4og?file=src/app/app.component.css

.html

<div #test *ngIf="imgMainUrl">
  test
    <img
        [src]="imgMainUrl"
        [style.width.px]="width" [style.height.px]="height"
        [ngClass]="{ 'img-radius' : rounded }"
    >
<button type="button" (click)="addClass()">asasas</button>

</div>

.ts

  @ViewChild('test') test: ElementRef;
  imgMainUrl = true;
  constructor(private renderer: Renderer2) { }
  addClass() {
    this.renderer.addClass(this.test.nativeElement, 'photo-removing');
  }

edited Jul 10, 2019 at 16:59

answered Jul 10, 2019 at 16:50

Manzer A

3,9266 gold badges41 silver badges79 bronze badges

2 Comments

Manzer A Over a year ago

Use #test @ViewChild('test') test: ElementRef;

Vahid Najafi Over a year ago

I will check it ASAP.

Collectives™ on Stack Overflow

Angular add class to component from component css file

3 Answers 3

1 Comment

2 Comments

Try:-

.html

.ts

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Try:-

.html

.ts

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related