0

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?

SuleymanSah
  • 17,153
  • 5
  • 33
  • 54
user1383163
  • 577
  • 1
  • 7
  • 24

2 Answers2

1

If you just want to display the name:

<mat-card-subtitle>{{shouldHideSub?'Linked':'Unlinked'}}</mat-card-subtitle>
Wandrille
  • 6,267
  • 3
  • 20
  • 43
1

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

joh04667
  • 7,159
  • 27
  • 34
  • this does solve the current issue, i opted to use the ngSwitch statement, i also noted that I needed the @Input variable assigned to another variable for it to pick the variable up which is weird but i am sure i will figure out why that is the case at some point. Secondly I also noted it changed the layout which is unfortunate but outside the scope of this question, many thanks – user1383163 Jul 29 '18 at 18:49