Key concepts

Component Settings

Each component must provide a settings token so that Anglify users can globally override the default values of the respective component. The advantage is that users no longer have to worry about forgetting to set some properties. For example, if every SnackBar in the project should be positioned on the top right, then you only have to define it once globally.

Getting started

1. Create Settings Token & Token Interface

   • ⚠️ All properties inside the Entire... settings interface must be required.
   • ⚠️ Properties inside the settings interface must not use the BooleanLike type
   • ⚠️ The TooltipSettings interface is the entry point for the end user. Partial makes all EntireTooltipSettings optional. This allows the user to overwrite only some settings and the rest are taken from the default settings

   export interface EntireTooltipSettings = {
      position: Position;
      hoverOpenDelay: number;
      touchOpenDelay: number;
      hoverCloseDelay: number;
      // ...
   }
   export type TooltipSettings = Partial<EntireTooltipSettings>
   export const TOOLTIP_SETTINGS = new InjectionToken<TooltipSettings>('Tooltip Settings');

2. Define default component values

   export const DEFAULT_TOOLTIP_SETTINGS: EntireTooltipSettings = {
     position: 'bottom',
     hoverOpenDelay: 0,
     touchOpenDelay: 0,
     hoverCloseDelay: 0,
     // ...
   };

3. Create and provide a SettingsProvider in your component or directive

   @Directive({
     providers: [createSettingsProvider<EntireTooltipSettings>('anglifyTooltipSettings', DEFAULT_TOOLTIP_SETTINGS, TOOLTIP_SETTINGS)],
     // ...
   })
   export class TooltipDirective {
     // ...
   }

4. Inject the provided settings

   public constructor(@Self() @Inject('anglifyTooltipSettings') private readonly settings: EntireTooltipSsettings) {
     // ...
   }

   • ⚠️ The settings object now contains the default settings merged with the settings, which were overwritten by the user.

5. Initialise the input properties

   @Input() public position: Position = this.settings.position;