Блог

 <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>
  

Это помещает mat-card-avatar слева, есть ли какие-либо настройки в заголовке mat-card, которые позволяют перемещать аватар в правый конец заголовка

вы можете попробовать это:

 ::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%;
}
  

Официального способа нет, потому что, если вы видите их исходный код mat-card-header , они сначала размещают аватар, а затем текст.

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

Вам нужно переопределить стили вручную. Поскольку это flexbox, вы можете легко переопределить его, не изменяя HTML таким образом.

 <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;
    amp;::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;
}