Добавление и удаление класса начальной загрузки при разделении при нажатии кнопки мыши в angular 7 с использованием средства визуализации

Я новичок в Angular 7, пытался внедрить функцию, но застрял. Есть три подразделения: левое, правое и среднее. средний раздел содержит еще 2 подразделения внутри, и эти 2 подразделения содержат кнопку внутри них. Я применил класс col-md-6 к среднему делению, и всякий раз, когда я нажимаю левую кнопку внутри среднего div, я хочу, чтобы левое деление было скрыто, и изменил класс среднего div с col-md-6 на col-md-9 и если скрыты и левый, и правый div, я хочу, чтобы класс среднего div изменился с col-md-9 на col-md-12. Я пробовал использовать Renderer2, используя addClass () и removeClass (). Он работает с hostlistener всякий раз, когда я нажимаю на элемент хоста. Но я хочу, чтобы эта функция работала всякий раз, когда я нажимаю кнопку. Если есть какой-либо другой метод достижения этого, то, пожалуйста, предложите использовать Elementref или renderer2.

home-page.component.html



**left division**

<div class = "col-md-3 sidebar" #leftBar style = "background-color: #F8F4F4;">
</div>


** middle div**

<div class = "md-center col-md-6"  id = "content" #content>

    **left button**


    <div class = "btn toggle-sidebar-left"  #t1 appSideBar> 
      <mat-icon> {{!leftBarHidden ? 'chevron_left' : 'chevron_right' }} 
      </maticon>
    </div>


    ** right button **
    <div class = "btn toggle-sidebar-left" (click) = "hide()" #t1>
        <mat-icon>
            {{!leftBarHidden ? 'chevron_left' : 'chevron_right' }}
        </mat-icon>
   </div>

</div>

**right div**
<div class = "col-md-3 sidebar scrollbar" *ngIf = "!rightBarHidden" id = "sidebar- 
  right" style = "background-color: #F8F4F4;">

</div>

home-page.component.ts

import { AfterViewInit, Component, OnInit, Input, Renderer2, ElementRef, 
ViewChild, HostListener, ViewChildren } from '@angular/core';
import {  Router } from '@angular/router';
import { SideBarDirective } from './appSideBar';


@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.css']
 })
 export class HomePageComponent implements OnInit, AfterViewInit {

  rightBarHidden = false;
  leftBarHidden = false;

  constructor(private router: Router, private render: Renderer2, 
          private el: Elemen Ref) { }

 @ViewChild('leftBar') LeftBar:ElementRef; // leftbar is variable for 
 accessing left div.

 @ViewChild('content') content:ElementRef; // content is variable for middle 
 div
 @ViewChild('t1') t1:ElementRef;  //t1 is variable for left button inside 
  middle div

 @HostListener('click')
 onclick() {
  this.leftBarHidden = !this.leftBarHidden;

 if (this.leftBarHidden)
     {
       const b = this.LeftBar.nativeElement;
       this.render.removeStyle(b, 'display');

      this.render.setStyle(b, 'display', 'none');

      const b = this.LeftBar.nativeElement;
      const c=this.render.parentNode(this.t1.nativeElement);
      this.render.removeClass(c,'col-md-6');
     this.render.addClass(c,'col-md-9');
    this.render.removeClass(this.content.nativeElement, 'col-md-6');
    this.render.addClass(this.content.nativeElement, 'col-md-9');


 }

 else {
       this.render.removeStyle(b, 'display');
       this.render.setStyle(b, 'display', 'block');
       console.info(b);
     }
 }