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

Question

Я новичок в Angular 7, пытался реализовать функцию, но застрял.Есть три подразделения, а именно левое, правое и среднее.средний div содержит еще 2 подразделения внутри него, и эти 2 подразделения содержат кнопку внутри них.Я применил класс col-md-6 для среднего деления, и всякий раз, когда я нажимаю левую кнопку внутри среднего деления, я хочу, чтобы левое деление было скрыто, и меняю класс среднего div с col-md-6 на col-md-9.и если левый и правый div скрыты, я хочу, чтобы класс среднего div изменился с col-md-9 на col-md-12.Я пытался использовать Renderer2, используя addClass () и removeClass ().Он работает с hostlistener, когда я нажимаю на элемент host.Но я хочу, чтобы эта функция работала всякий раз, когда я нажимаю на кнопку.Если есть какой-либо другой способ достижения этого, то, пожалуйста, предложите использовать 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.log(b);
     }
 }