title: how can i change class by get element by id in angular 8 and change the style of div
body: <p>How can I add and remove class by getElementBy id in angular 8.
  I want to remove class 'col-md-12' and add 'col-md-6' when the user click the details icon. </p>
  
  <p>and also change the style of another div like display: block.</p>
  
  <p>component.html</p>
  
  <pre><code> &lt;div class="col-md-12" id="demo"&gt;
        &lt;div class="example-container mat-elevation-z8 mt-5"&gt;
          &lt;table class="table table-striped"&gt;
            &lt;tbody&gt;
              &lt;tr&gt;
                &lt;th&gt;Points&lt;/th&gt;
                &lt;th&gt;###&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr *ngFor="let user of usersArray" &gt;
                &lt;td&gt;
                  {{user.score}}
                &lt;/td&gt;
                &lt;td&gt;
                  &lt;i class="material-icons text-primary pointer" (click)="details()"&gt;account_circle&lt;/i&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
  
          &lt;/table&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>after the changing class, I want to show this div </p>
  
  <pre><code>  &lt;div class="col-md-6" style="display: none;" &gt;
          &lt;div class="userDetails"&gt;
              &lt;img src="../../assets/images/user.png"&gt;
              &lt;span class="mx-3"&gt; &lt;b&gt;Shubham Patil&lt;/b&gt;&lt;/span&gt;
              &lt;div class="example-container mat-elevation-z8 mt-4"&gt;
                &lt;table class="table table-striped rounded"&gt;
                  &lt;tbody&gt;
                    &lt;tr&gt;
                      &lt;th&gt;Topics&lt;/th&gt;
                      &lt;th&gt;Points&lt;/th&gt;
                    &lt;/tr&gt;
                    &lt;tr &gt;
                      &lt;td&gt;
                        Why me
                      &lt;/td&gt;
                      &lt;td&gt;
                        300
                      &lt;/td&gt;
                    &lt;/tr&gt;
                  &lt;/tbody&gt;
                &lt;/table&gt;
                &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>component.ts</p>
  
  <pre><code>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")
  }
  </code></pre>