Angular - Changing a components style depending on ngIf result - html

Question

I have a mat-card that essentially has two columns inside of it; one column for displaying the image and the other for the mat-card contents. I currently set the two columns widths to half of their containers width to equally space them inside of the mat-card.
I am trying to modify my html code so that if the returned image path is empty, the mat-card contents occupy the entire width of the mat-card. I've tried doing so using the [ngClass] below but couldn't get it to work.
Is there an alternate way of doing this?
Below is my html code, I set the width of the two columns to half their containers width in the css file.
<mat-card class="mat-elevation-z1" id="card-div" >
<div class="img-container" *ngIf="blog.imagePath != ''" [ngClass]="blog.imagePath === '' ? 'width': '0%'">
<img [src]="blog.imagePath" [alt]="">
</div>
<div class="card-content" [ngClass]="blog.imagePath === '' ? 'width': '80%'">
<mat-card-header>
<mat-card-title> {{ blog.title }}</mat-card-title>
<mat-card-subtitle>
Published: {{blog.dateCreated}} <br>
Author: {{blog.author}}
</mat-card-subtitle>
</mat-card-header>
<hr>
<mat-card-content>
<p >{{ blog.content }}</p>
<mat-action-row >
<button mat-raised-button *ngIf="adminIsAuthenticated" (click)="onDelete(blog.blogId)">Delete</button>
<button mat-raised-button *ngIf="adminIsAuthenticated" [routerLink]="['/edit', blog.blogId]">Edit</button>
<button mat-raised-button >Read More</button>
</mat-action-row>
</mat-card-content>
</div>
</mat-card>

Answer 1

The [ngClass] helps you to add some CSS classes to an element, while in your code you are trying to add width property that is set to 80%.
If you wanna use a [ngClass] then you can write it like so
[ngClass]="{ yourClassName: blog.imagePath === ''}"
and in CSS or SCSS file specify this class like so
.yourClassName {
width: 80%;
}