Angular MatCardHeader : position mat-card-avatar on the right

user_1903460 0
Viewed 575
<mat-card-header>
            <mat-card-title>Shiba Inu</mat-card-title>
            <div mat-card-avatar class="example-header-image"></div>
            <mat-card-subtitle>Dog Breed</mat-card-subtitle>
</mat-card-header>

This places the mat-card-avatar on the left, are there any configuration in the mat-card-header that allow to move the avatar to the right end of the header

angular-material css
2 Answers

you can try this:

::ng-deep .mat-card-header{
        flex-direction: row-reverse !important;
}
    
::ng-deep  .mat-card-avatar{
    width: 10%;
}
        
::ng-deep  .mat-card-header-text{
   width: 90%;
}
user_8853640

There is no official way because if you see their source code for mat-card-header They place avatar first and then text.

<ng-content select="[mat-card-avatar], [matCardAvatar]"></ng-content>
<div class="mat-card-header-text">...</div>
<ng-content></ng-content>

You have to override styles manually. Since it is a flexbox you can override it easily without changing HTML like this.

<mat-card-header class="mat-card-header-avatar-right">
  <div mat-card-avatar class="example-header-image"></div>
  <mat-card-title>Shiba Inu</mat-card-title>
  <mat-card-subtitle>Dog Breed</mat-card-subtitle>
</mat-card-header>

//SCSS Version
.mat-card-header-avatar-right {
    justify-content: space-between;
    &::ng-deep {
        .mat-card-header-text {
            margin-left: 0 !important;
        }
    }
    .mat-card-avatar {
        order: 1;
    }
}

//CSS Version
.mat-card-header-avatar-right {
  justify-content: space-between;
}

.mat-card-header-avatar-right ::ng-deep .mat-card-header-text {
  margin-left: 0 !important;
}

.mat-card-header-avatar-right .mat-card-avatar {
  order: 1;
}
user_117197870
Related