How to update CSS via typescript

Question

I have a pie chart that I have hidden by default as such:

 .sub-chart {
    min-height: 300px;
    width: 100%;
    margin-bottom: 24px;
    visibility: hidden;
 }

However, upon a user filtering on a different chart, I want to change the css visibility attribute so that the chart is no longer hidden.

How am I able to update css via the typescript component file?

you can use <div class="sub-chart" [style.visibility]="condition?'visible':null">` and make the condition true/false. As style has priority over class, you see the "div" — Eliseo
– Eliseo, Commented May 12, 2020 at 15:59

Cagri Tacyildiz · Accepted Answer · 2020-05-12 15:50:25Z

1

Demo create attribute

isDivVisible="visible"

in html give as its style

<div class="sub-chart" [style.visibility]="isDivVisible"></div>

in component change isDivVisible like below

this.isDivVisible="hidden";

answered May 12, 2020 at 15:50

Cagri Tacyildiz

17.7k6 gold badges38 silver badges61 bronze badges

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

1 Comment

GreyBeardedGeek Over a year ago

This works, but it would arguably be better to swap a css class in and out instead of directly tweaking the style in code. You can bind to [ngClass] to do this. See angular.io/api/common/NgClass

ionut-t · Accepted Answer · 2020-05-12 16:05:30Z

You can do it using ViewChild decorator and Renderer2 service like so:

1) In the component template add a template variable:

<my-element #myElement></my-element>

2) In the ts file:

@ViewChild('myElement') myElement: ElementRef<any> // the argument type can be HTMLElement / HTMLDivElement / component etc.

constructor(private renderer: Renderer2) {}

myMethod() {
 this.renderer.setStyle(this.myElement.nativeElement, 'visibility', 'visible');
}

ViewChild, Renderer2, ElementRef must be imported from @angular/core.

You can also use addClass and/or removeClass methods instead of setStyle for the renderer.

If you are using Angular 8 you need to pass a configuration object as a second argument to the @ViewChild like so: @ViewChild('myElement', { static: false }). The static property must be set to true if it is used in OnInit life cycle hook (for Angular 9 as well).

Collectives™ on Stack Overflow

How to update CSS via typescript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related