Angular Как проверить, открыт ли модальный

Question

Я работаю над задачей перевода моего приложения angular и использую ngx translate, когда проверяю, является ли текущий язык арабским c Я хочу выровнять текст модуля вправо, поэтому я хочу чтобы проверить, открыт ли модальный компонент на моем angular компоненте,

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>

Я пытался предупредить, если модальный hasClass ('in'), но это не работает! Есть ли способ проверить, открыт он или нет!