angularangular-material-6mat-card

angular material conditional subtitle

I have the following:

<div class="wrapper">
  <mat-card style="margin:1em; width: 250px; border: 1px ridge white">
    <mat-card-header>
      <div mat-card-avatar class="verify-header-image"></div>
      <mat-card-title>{{name}}</mat-card-title>
      <mat-card-subtitle [hidden]="shouldHideSub">Linked</mat-card-subtitle>
      <mat-card-subtitle [hidden]="!shouldHideSub">Unlinked</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image src={{picture}} alt="Portrait of the character">
    <mat-card-content>
    </mat-card-content>
    <mat-card-actions>
      <div class="button-row">
        <button mat-raised-button color="primary">Details</button>
      </div>
    </mat-card-actions>
  </mat-card>
</div>

I want to show the subtitle conditionally but for some reason I cannot use hidden like I have above, ng-if does not seem to work either, I also cannot use ngClass to specify the class for mat-card-avatar picture.

Is this just not possible or am I missing something?

Solution

  • [hidden] is an internal attribute that Angular looks for on most DOM elements, but not all. A custom component (i.e. custom DOM element) won't have this logic included.

    A quick fix would be to add the attribute as a global CSS rule: 

    [hidden] {
    display: none !important;
}

    ...but the !important flag can be viewed as gross and not good practice. On top of this, other view directives like fxFlex can override the [hidden] display styling. It's usually better to use an *ngIf attribute, or in this case, an *ngSwitch rule.