Change column sizes by clicking in angular - html

Question

i have this page that has two buttons divided By two clo-md-6 :
i want when i click in the button the first button become col-md-9 and the other col-md-3 and the same for the inverse
i don t know how to do it in angular
This is my HTML :
<div class="container-fluid">
<div class="row">
<!-- $("#btn1").parentElement.parentElement.className= "col-3"-->
<!--------------------THE FIRST BUTTON----------------------------->
<div class="col-xl-6" [class.col-xl-9]="isclicked">
<div class="card">
<button type="button" id="btn1" class="btn btn-primary" (click)="AfficherRecherche()">Agent professionnelle</button>
<div class="card-body" *ngIf="isclicked">
<h4 class="header-title mt-0 mb-4">Agent Professionnelle</h4>
<aw-wizard>
<aw-wizard-step class="sw-main sw-theme-default">
<form [formGroup]="searchForm">
<div class="row">
<div class="col-12">
<div class="form-group row mb-3">
<input type="text" class="form-control" (keyup)="searchTerm.next($event)" formControlName="search" placeholder="Rechercher ..." (input)="search()" [(ngModel)]="searchText" />
<div *ngIf="loading">
<p class="search-message">Searching</p>
<div class="lds-ellipsis">
<!-- -------------------------------THE SEOND BUTTON------------------------------------------------------------------ -->
<div class="col-xl-6" [class.col-xl-3]="isclicked">
<div class="card">
<div class="btn-group">
<button id="btn2" type="button" class="btn btn-primary" (click)="AfficherAgentpar()">Agent Partculier</button>
</div>
this is my component :
AfficherRecherche() {
this.isclicked = !this.isclicked;
}
AfficherAgentpar() {
this.agentparclick = !this.agentparclick;
}

Answer 1

You should trigger classes on click. So for example:
In your TS file declare a variable with a boolean:
public resize: boolean;
In your HTML you have 2 divs and a button:
<div class="clo-md-6" [class.col-md-9]="resize"></div>
<div class="clo-md-6" [class.col-md-3]="resize"></div>
<button (click)="resize != resize">Trigger me</button>
What happens is the following: When the button gets clicked it changes the value of our resize boolean. Since this is false by default, it'll trigger to true. When resize is true, the first div will be assigned the col-md-9 class, and the second div will be assigned the col-md-3 class. If you click the button again, the divs will go back to being 50/50.