Как изменить стиль элемента при нажатии на значок в модальном? - PullRequest
Новая
       19

Как изменить стиль элемента при нажатии на значок в модальном?

0 голосов
/ 04 ноября 2018

Я создаю модал с помощью mdbModal, и в моем модале есть 4 иконки, как на картинке ниже.

enter image description here

Я хочу, чтобы при нажатии на каждый из значков менялся цвет фона круга и цвет рамки. вот мой модальный код: 

<div mdbModal #addSocialModal="mdbModal" class="modal fade top" id="addSocialModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel"
     aria-hidden="true">

  <div class="modal-dialog modal-dialog-centered" style="justify-content: center; max-width: 100%"
       role="document">
    <div class="modal-content addSocialModal-size modal-lg"
         style="text-align: center">


      <form [formGroup]="createProjectForm" (ngSubmit)="onAddSocial()">

        <div class="modal-body mx-3 d-rtl" style="margin-top: 50px;margin-bottom: 10px">

          <a class="socialProject icon-instagram" id="instagramm" #instagramm
             (click)="onClickSocial('instagram')"
             style="border: 1px solid #b913bd"></a>
          <a class="socialProject icon-telegram" id="telegram"
             (click)="onClickSocial('telegram')"
             style="border: 1px solid #19b4ff"></a>
          <a class="socialProject icon-linkedin" id="linkedin"
             (click)="onClickSocial('linkedin')"
             style="border: 1px solid #004a73"></a>
          <a class="socialProject icon-twitter" id="twitter"
             (click)="onClickSocial('twitter')"
             style="border: 1px solid #95d8fe"></a>

        </div>

        <li class="create-project-btn-position d-rtl">

          <button class="btn cancel-btn" (click)="addSocialModal.hide()">
            لغو
          </button>
          <button [disabled]="!createProjectForm.valid" type="submit" class="btn create-project-btn">
            اتصال اکانت
          </button>

        </li>

      </form>
    </div>
  </div>
</div>

и вот мой код component.ts для onClickSocial метода: 

onClickSocial(social) {

    if (social === 'instagram') {

      document.getElementById('instagramm').style.backgroundColor = 'red';
    }
    }

но это не работа. когда я тестирую этот код, отличный от модального, он работает, но в моем модальном не работает.

как я могу решить эту проблему?

1 Ответ

0 голосов
/ 04 ноября 2018

Попробуйте использовать [ngClass], чтобы применить класс CSS на основе условия-

- Код компонента - 

social: string;

onClickSocial(value) {
    this.social = value;
}

- HTML код - 

<a (click)="onClickSocial('instagram')" [ngClass]="{'active': social == 'instagram'}"></a>

- код CSS - 

.active {
  // style code
}
...