Revert bound title attribute to parent title

Question

This is the opposite of questions like this one.

I have a child element in a parent element (in this case a matSelect in a matCard, which is probably irrelevant) with a title set for the parent element. The child element may or may not supply its own title:

<mat-card title="Parent title">
  <mat-select [title]=getChildTitle()>
  </mat-select>
</mat-card>

Is there anything I can return from getChildTitle() to get it to revert to the parent's title text, or is the only way I can do this to specify the Parent title again, à la [title]=getChildTitle() ?? 'Parent title'? Just returning undefined doesn't seem to do it - then my title text reads "undefined".

Answer 1

You provide a little context on how these titles are passed in. I will assume that you have a component that will use mat-card and mat-select.

In the my-component.ts

    @Component({
      selector: 'my-component',
      templateUrl: 'my-component.html',
      styleUrls: ['my-component.css'],
    })
    export class MyComponent{
      
       @Input()
       public parentTitle: string;

       @Input()
       public childTitle?: string;

       public function getChildTitle() {
          return this.childTitle ?? this.parentTitle;
       }
    }

In the my-component.html

<mat-card [title]="parentTitle">
  <mat-select [title]=getChildTitle()>
  </mat-select>
</mat-card>

In the app-component.html

<!-- this will use parent for both parent and child title -->
<my-component parentTitle="Parent"></my-component>