Write if-else condition angular 4 for flexGrow - html

Question

in my app I am using fexbox concept to show the companies name and headcompany of a material. I used ngx-datatable here. I set columnmode to flex. Now I set flexgrow for each column to 1. I want to wrote an if-else condition in case of flex-grow for this two column. for example if selectedCompany is pressed the second column grow will be 2, else it will be 1.
<ngx-datatable *ngIf="companies && companies.length" class="material" [scrollbarH]="true" [rows]="companies" [externalPaging]="true" [externalSorting]="true" [count]="companyPage.totalElements" [offset]="companyPage.number" [limit]="companyPage.size"
[columnMode]="'flex'" [footerHeight]="'auto'" [headerHeight]="'auto'" [rowHeight]="'auto'" (page)='onCompanyPageEvent($event)' (sort)='onCompanySortEvent($event)' (activate)="onActivateCompany($event)">
<ngx-datatable-column [prop]="'name'" [flexGrow]="1" >
<ng-template ngx-datatable-header-template >
<span class="ellipsis" title="{{value}}">
{{'A921Name' | translate}}
</span>
</ng-template>
</ngx-datatable-column>
// I triesd to write if-else here
<ngx-datatable-column [prop]="'parentName'" *ngIf="selectedCompany" [flexGrow]="2" [sortable]="false" >
<ng-template ngx-datatable-header-template>
<span class="ellipsis" title="{{value}}">
{{'A922ParentCompany' | translate}}
</span>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>

Answer 1

When you wrap an attribute with square brackets, you make it dynamic. It means that it will look for properties on the respective typescript class. So for static values like the one you have here [footerHeight]="'auto'", you don't need to wrap footerHeight with square bracket as you are setting it to a string 'auto'. You can just do footerHeight="auto". However, if there is a property in your typescript class that holds the string value for footerHeight, for example:
export class RelatedPage {
footerHeightValue: string;
constructor(){
this.footerHeightValue = 'auto';
}
}
then you can do the dynamic binding and set your footerHeight to the respective property as in [footerHeight]="footerHeightValue";
So, when you want to make your attribute's value change on certain conditional statement, you want to make the attribute dynamic as in [attribute]. In your case, if your flexGrow property has to change based on whether the title was tapped or not, you could bind the tap event to a boolean value.
<span (click)="titleClicked()">{{companyName}}</span>
and in your typescript class,
export class RelatedPage {
titleSelected: boolean;
titleClicked() {
this.titleSelected = true;
}
}
Now, you can bind the titleSelected property with your flexBox attribute as in
[flexBox]="titleSelected ? 2 : 1"
this evaluates as
if (titleSelected === true) {
flexBox = 2;
} else {
flexBox = 1;
}