MacGyvering Directives

Using Third Party Directives in Ways They Were Never Intended

MacGyvering (Photo by jose aljovin on Unsplash)

Have you ever started using a third party directive and then wished that it behaved slightly differently? What if you could just tweak it a little bit? Think of all the amazing things you could do!

In this blog post, Isaac Mann (a Senior Engineer at Nrwl_io) explains how to handle Angular directives in different ways and shows you the pros and cons of each.

Let’s say we have a directive called SomeDirective that looks like this:

@Directive({
  selector: ‘[someDirective]’,
})
export class SomeDirective {}

It does something really helpful, but you wish it was a little more helpful or that it seamlessly integrated with your existing code somehow. We’ll go through 4 different ways to enhance that directive without touching the original source code.

Note 1: The example we’re extending is a Directive, but some of these techniques can also apply to Components. I’ll specifically call that out in the “Pros” list for each example.

Note 2: (heavy-handed foreshadowing) The theme of this article is Favoring Composition Over Inheritance™️. This first example is a straw man that I’ll spend the rest of the article tearing down.

1. Extend the Directive

The most obvious solution is to do something like this:

export class ExtendedDirective extends SomeDirective {
  constructor() {
    super(/*  🔜🔥😭🔥 */);
  }
}

Usage:

<div someDirective></div>

Pros:

• You can do whatever you want to SomeDirective

Cons:

• You have to know all the implementation details of SomeDirective
• If those implementation details ever change you have to update ExtendedDirective

Example:

Don’t do this! Ever!

Lost in the jungle (Photo by Ruben Ramirez on Unsplash)

Ok, if you happen to be lost in the jungle with a drug cartel chasing you, then fine. Desperate times.

Now for some better solutions.

2. Combine two directives in one selector

@Directive({ selector: ‘[combinedDirective]’ })
export class ExtendedDirective extends SomeDirective { /* keep this empty */ }
@Directive({ selector: ‘[combinedDirective]’ })
export class OtherExtendedDirective extends SomeOtherDirective { /* keep this empty */ }
@Directive({ selector: ‘[combinedDirective]’ })
export class CombinedDirective {
  // Combined logic goes here
  constructor(
    @Host() public someDirective: ExtendedDirective,
    @Host() public someOtherDirective: OtherExtendedDirective,
  ) {}
}

Usage:

Instead of this:
<div someDirective someOtherDirective></div>
You can now do this:
<div combinedDirective></div>

Pros:

• Two directives with only one selector
• Don’t need to know the internals of the SomeDirective or SomeOtherDirective class.

Cons:

• You are overwriting the @Directive or @Component metadata. If the template for a component changes, you’ll need to update your combined directive.

Hooking on (Photo by Efe Kurnaz on Unsplash)

Example:

Trigger a tooltip only if focused with the keyboard.

I want a tooltip to help keyboard-only users know about a keyboard shortcut they can use to open a context menu when a particular element is in focus. This tooltip doesn’t make sense to show on mouseover, because for mouse users, the cursor has been changed to context-menu to indicate that a right-click will open a context menu.

@Directive({ selector: ‘[enhancedContextMenu]’ })
export class ExtendedMatTooltipDirective extends MatTooltipDirective { /* keep this empty */ }
@Directive({ selector: ‘[enhancedContextMenu]’ })
export class ExtendedContextMenuDirective extends ContextMenuDirective { /* keep this empty */ }
@Directive({ selector: ‘[enhancedContextMenu]’ })
export class EnhancedContextMenuDirective {
  // Combined logic goes here
  constructor(
    @Host() public tooltip: ExtendedMatTooltipDirective,
    @Host() public contextMenu: ExtendedContextMenuDirective,
  ) {}
  @HostListener('mouseenter')
  disableTooltip() {
    this.tooltip.disable();
  }
@HostListener('mouseleave')
  enableTooltip() {
    this.tooltip.enable();
  }
  // other logic
}

3. Have the user add a modifier directive

@Directive({
  selector: ‘[someDirective][extendingDirective]’,
})
export class ExtendingDirective {
  constructor(@Host() public someDirective: SomeDirective) {}
}

Usage:

<div someDirective extendingDirective></div>

Pros:

• Don’t need to know the internals of the SomeDirective class.
• Don’t overwrite the SomeDirective metadata (so we can modify components).

Cons:

• User has to remember to add the modifier directive everywhere they want to use it.

Would you like fries with that? (Photo by Taylor Harding on Unsplash)

Example:

Focus a matTab if the formControls inside it are invalid.

In a form that is spread across multiple tabs, sometimes the form submission fails because a field that is not on the current tab has failed validation. We want to automatically focus the tab that contains the invalid field.

@Directive({
  selector: ‘[matTab][formTab]’,
})
export class FormTabDirective {
  @ContentChildren(FormControl) formControls: QueryList<FormControl>;
  constructor(@Host() public tab: MatTabDirective) {}
  focusIfInvalid() {
    if(this.formControls.some(control => control.invalid)) {
      this.tab.focus();
    }
  }
}

4. Attach a modifier directive globally

@Directive({
  selector: ‘[someDirective]’,
})
export class AttachedDirective {
  constructor(@Host() public someDirective: SomeDirective) {}
}

Usage:

<div someDirective></div>

Pros:

• Don’t need to know the internals of the SomeDirective class.
• Don’t overwrite the SomeDirective metadata (so we can modify components).
• No need to modify existing uses of SomeDirective

Cons:

• Users can not opt out of the AttachedDirective behavior.

Welded together (Photo by Maxime Agnelli on Unsplash)

Example:

Disable the ripple animation for all matButtons.

Maybe we want all the buttons in our app to have the ripple animation disabled, but we want to allow ripples on other UI elements so we can’t use the MAT_RIPPLE_GLOBAL_OPTIONS. (This example is a little contrived, but no more than some of the plots on MacGyver.)

@Directive({
  selector: ‘[matButton]’,
})
export class NoRippleMatButtonDirective {
  constructor(@Host() public button: MatButton) {
    this.button.disableRipple = true;
  }
}

Conclusion

The Angular docs define attribute directives like this:

Attribute directives — change the appearance or behavior of an element, component, or another directive.

However, I have rarely seen attribute directives actually used to extend or enhance another component or directive. Now you’re equipped with three different ways to do exactly that.

Happy MacGyvering!

If you liked this, click the 👏 below so other people will see this here on Medium. Follow Isaac Mann and Nrwl_io to explore more content about software development.