I'm working on translation task of my angular app and I'm using ngx translate, when checking if the current language is arabic I want to align the text of a module to the right so I want to check if a modal is opened on my angular component,
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { LangChangeEvent, TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-plaintes',
templateUrl: './plaintes.component.html',
styleUrls: ['./plaintes.component.css']
})
export class PlaintesComponent implements OnInit {
constructor(public router: Router, public translate: TranslateService, ) { }
ngOnInit() {
alert($('#modal-how').hasClass('in'));
if (localStorage.getItem('defaultLanguage') === "ar") {
$('#modal-how').css("text-align", "right")
}
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-4">
<a class="widget widget-12 has-shadow" href="#" data-toggle="modal" data-target="#modal-how">
<div class="widget-body">
<div class="media">
<div class="icon-12">
<i class="la la-question-circle"></i>
</div>
<div class="text-12">
<div class="title ">{{'plaintes.commentcamarche' | translate}}</div>
</div>
</div>
</div>
</a>
</div>
<div id="modal-how" class="modal fade">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">{{'procedure.mesPlaintes' | translate}}</h4>
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">close</span>
</button>
</div>
<div class="modal-body">
<p>
{{'procedure.p1' | translate}} <br>
<br>
{{'procedure.p2' | translate}}<br>
<br>
{{'procedure.p3' | translate}}
</p>
<h4><span class="text-gradient-02">{{'procedure.etape1' | translate}}</span> {{'procedure.Choisirl’emplacement' | translate}}</h4>
{{'procedure.detailemplacement' | translate}}.<br><br>
<h4><span class="text-gradient-02">{{'procedure.etape2' | translate}}</span> {{'procedure.Choisirletypedeplainte' | translate}}</h4>
{{'procedure.detailtypeplainte' | translate}}<br><br>
<h4><span class="text-gradient-02">{{'procedure.etape3' | translate}}</span> {{'procedure.Attacherdesphotos' | translate}}</h4>
{{'procedure.detailtypeplainte' | translate}} <br><br>
<h4><span class="text-gradient-02">{{'procedure.etape4' | translate}}</span> {{'procedure.Validationdesdonnees' | translate}}</h4>
{{'procedure.detailvalidation' | translate}} <br><br>
<i class="la la-check-square-o" style="color: green"></i>
{{'procedure.garantie' | translate}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">{{'procedure.ok' | translate}}</button>
</div>
</div>
</div>
</div>I tried to alert if the modal hasClass ('in') but it's not work ! is there a way to check if it's opened or not !