Error when trying to add/remove class to element from directive code using Renderer2

🐞 bug report

Affected Package

The issue is caused by package @angular/core

Is this a regression?

No

Description

When trying to use Renderer2 to add/remove class to directive host element – error is shown, class is not added/removed. When doing the same from component’s code – OK.

🔬 Minimal Reproduction

StackBlitz

🔥 Exception or Error

ERROR DOM Exception: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty.
...
ERROR DOM Exception: Failed to execute 'remove' on 'DOMTokenList': The token provided must not be empty.

🌍 Your Environment

Angular Version:

11

1 possible answer(s) on “Error when trying to add/remove class to element from directive code using Renderer2

  1. Heya, it looks the problem here is that the focusable attribute binds an empty string to FocusableDirective.focusable as it is declared as an input, such that subsequently adding/removing the class fails as it’s illegal to add an empty string.

    As far as I can tell this is working as expected, so I’ll close this issue. Feel free to continue the discussion below.