Optional Title Directive

Overview

The optional title directive can be used in those cases where you have a title tag on your HTML element that has no content (e.g. <div [title]='myTitle()'>myTitle() Returns nothing</div>).

Under normal HTML conditions, an empty title will display nothing, however if you are calling a custom method that returns a value of undefined, you will see an empty title bubble appear when hovering. To prevent this behaviour, the optional title directive checks the existence of the title value being passed to it.

Required Imports

To use the optional title directive in your component, you must import the OptionalTitleDirective from @clinicaloffice/mpage-developer and include it in your component imports array in your component TypeScript file.

e.g. your-component.ts

import {OptionalTitleDirective} from '@clinicaloffice/mpage-developer';

@Component({
  selector: 'your-component',
    imports: [OptionalTitleDirective],
  templateUrl: './your-component.component.html',
  styleUrl: './your-component.component.scss',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourComponent {
}

Usage

To use the optional directive, apply it to an HTML element you wish to display a title bubble on. Instead of using the HTML title attribute, use coOptionalTitle instead.

<div [coOptionalTitle]="myTitle()"</div>