How to change a CSS class using Angular 7

Question

I am using ngx-bootstrap's modals and I want to change the CSS class modal-dialog with some other properties.

My question is: How do I dynamically change the properties of for example this class in Angular?

I have played around with ElementRef, TemplateRef and Rendere2 but not found any solution.

Thanks for you help in advance.

EDIT 1:

I am opening the modal using BsModalService, so my template looks like this:

<ng-template #defaultModalTemplate>
    Content
</ng-template>

I open the dialog like this:

public openModal(): void {
    this.modalRef = this.modalService.show(this.templateRef);

    if (this.renderer && this.templateRef) { // trying to extract .modal-dialog here

    }
}

the variable templateRef is defined like this:

@ViewChild('defaultModalTemplate') public templateRef?: TemplateRef<any>;

I am opening the modal from typescript using ng-template, see updated answer. So i don't know how to use ngClass or ngStyle with this approach :) — Diemauerdk
– Diemauerdk, Commented Nov 22, 2018 at 11:56
did you tried the native access element 'document.querySelector('seletctor').style.cssProperty = newVal' — Amir Fawzy
– Amir Fawzy, Commented Nov 22, 2018 at 12:06
@AmirFawzy I have made it work using document. As simple as doing this: document.getElementsByClassName('modal-dialog'). This gives me an HTMLCollectionOf<Element> where i can take the first element and if that is not undefined, then change its attributes — Diemauerdk
– Diemauerdk, Commented Nov 22, 2018 at 12:30

Amir Fawzy · Accepted Answer · 2018-11-22 11:59:34Z

6

you can do that by class binding or NgClass

<div [class.className]="proerty(boolean)">some text or elements</div>

property here if it true will active/add the class false deactivate/remove

or

<div [ngClass]="{'className': expiration }">some text or elements</div>

with this approach you can use more than class and control them by expiration all you need to do separate them by , like so {'className': expiration, 'anotherClass': expiration }

answered Nov 22, 2018 at 11:59

Amir Fawzy

4775 silver badges13 bronze badges

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

1 Comment

Diemauerdk Over a year ago

Thanks for the suggestions - but isn't this adding/removing classes? I want to change a class in the DOM - specifically the 'modal-dialog' CSS class.

hghandi · Accepted Answer · 2021-03-15 21:36:31Z

I did need to use this just now, and found a way that worked for me. What you can do is like this:

    <div class="{{className}}">
     Content
    </div>

and Whenever you change the value of the class it will be applicated on the DOM.

You can initialize the variable className with whatever class you want and then change it to whatever class you want afterwards. This is an application for Multi-Theme, there are more things you can do with this like making a service and changing the class in another component and then send that className to the component where you change the class and then theme changed.

Happy Coding 😊

Collectives™ on Stack Overflow

How to change a CSS class using Angular 7

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related