Как я могу изменить класс, получить элемент по идентификатору в angular 8 и изменить стиль div

Question

Как добавить и удалить класс по идентификатору getElementBy в angular 8. Я хочу удалить класс 'col-md-12' и добавить 'col-md-6', когда пользователь нажимает значок сведений.

, а также изменить стиль другого div, например display: block.

component. html

 <div class="col-md-12" id="demo">
      <div class="example-container mat-elevation-z8 mt-5">
        <table class="table table-striped">
          <tbody>
            <tr>
              <th>Points</th>
              <th>###</th>
            </tr>
            <tr *ngFor="let user of usersArray" >
              <td>
                {{user.score}}
              </td>
              <td>
                <i class="material-icons text-primary pointer" (click)="details()">account_circle</i>
              </td>
            </tr>
          </tbody>

        </table>

      </div>
    </div>

после изменения класса, я хочу показать этот div

  <div class="col-md-6" style="display: none;" >
        <div class="userDetails">
            <img src="../../assets/images/user.png">
            <span class="mx-3"> <b>Shubham Patil</b></span>
            <div class="example-container mat-elevation-z8 mt-4">
              <table class="table table-striped rounded">
                <tbody>
                  <tr>
                    <th>Topics</th>
                    <th>Points</th>
                  </tr>
                  <tr >
                    <td>
                      Why me
                    </td>
                    <td>
                      300
                    </td>
                  </tr>
                </tbody>
              </table>
              </div>
        </div>
    </div>

component.ts

element: HTMLElement;

 details(){
    this.element = document.getElementById('demo').removeClass("col-md-12") as HTMLElement;
    this.element = document.getElementById('demo').addClass("col-md-6") as HTMLElement;
    console.log("change")
}

Answer 1

Попробуйте так:

В шаблоне:

<div class="col-md-12" id="demo" #demo>
   ...
   <td>
    <i class="material-icons text-primary pointer" (click)="details(demo)">account_circle</i>
   </td>
   ...
</div>

и в .ts

details(elem: HTMLElement) {
  console.log(elem.className, 'before');
  elem.className = 'col-md-6';
  console.log(elem.className, 'after');
}

Answer 2

Способ "Angular" - привязать переменные в файле компонента к шаблону, используя язык шаблонов Angular. См. шаблон синтаксиса в Angular документах для получения дополнительной информации.

component. html

 <div id="demo"
    [class.col-md-12]="!isShowingDetails"
    [class.col-md-6]="isShowingDetails"> <!--"[class.my-class-name] syntax to dynamically add or remove classes based on if the value assigned to the property is true/false -->
      <div >
        ...
            <tr *ngFor="let user of usersArray" >
              <td>
                <i class="material-icons" (click)="showDetails()">account_circle</i>
              </td>
            </tr>
         ...
      </div>
    </div>
    <div class="col-md-6" *ngIf="isShowingDetails"> <!--ADDED *ngIf directive to show and hide details HTML -->
        <div class="userDetails">
            ...
        </div>
    </div>

component.ts

@Component({
    ...
})
class MyComponent {
    isDisplayingDetails = false;

    showDetails() {
        isDisplayingDetails = true;
    }

}

См. привязка класса и * ngIf для получения дополнительной информации.

Answer 3

Также вы можете просто использовать директиву ngClass angular, используя условие. Пожалуйста, смотрите нижеприведенную ссылку https://angular.io/api/common/NgClass