How can I put the mat card title and subtitle in the same line?-CodePudding

I am using Angular material, this is the html code:

<mat-card>
   <mat-card-header *ngFor="let club of result[0]">
      <mat-card-title>{{club.clubName}}</mat-card-title>
      <mat-card-subtitle>Club</mat-card-subtitle>
   </mat-card-header>
</mat-card>

I want to this:

CodePudding user response：

You can either use the CSS or HTML structure adjustment:

Using CSS: Take mat-card-header as a parent to write the CSS and put display: flex

Using HTML Put card subtitle inside the card-title tag

Please let me know if you have any question

CodePudding user response：

Add a custom class .my-card to mat-card elementzand target the inner elements

Angular 14

::ng-deep .my-card .mat-card-header .mat-card-header-text {
  display: flex;
}

::ng-deep .my-card .mat-card-header .mat-card-header-text .mat-card-subtitle {
  margin: 0 0 12px !important;
}

Angular 15

::ng-deep .my-card .mat-mdc-card-header .mat-mdc-card-header-text {
  display: flex;
}

::ng-deep .my-card .mat-mdc-card-header .mat-mdc-card-header-text .mat-mdc-card-subtitle {
  margin: 0 0 12px !important;
}