[FIXED] how change style of element when click on icon in modal?

Issue

i create a modal with mdbModal and in my modal have 4 icons like image below.

i want when i click on each of icons , background color of circle and border color of icon change. here is my modal code:

<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>

and here is my component.ts code for onClickSocial method:

onClickSocial(social) {

    if (social === 'instagram') {

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

but it is not work. when i test this code other than modal it works, but in my modal not works.

how can i fix this problem ?

Solution

Try using [ngClass] to apply css class based on condition-

--Component Code--

social: string;

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

--HTML Code--

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

--CSS Code--

.active {
  // style code
}

Answered By - random

Answer Checked By - Candace Johnson (PHPFixing Volunteer)