How do I use "inert" in Angular 14?

Question

I would like to use the new inert attribute in my Angular 14 app.

How do I use this attribute?

I've tried the following

<div [attr.inert]="someBoolean"></div>

But inert="false" is ending up in my HTML. This is making the element inert, even when I don't want it to be.

How do I fix this?

Answer 1

Since inert is a boolean value, its presence means "it's on". Setting inert="false" still means true. The only way to remove the inert behavior, is to remove that attribute from the DOM element entirely.

In Angular, it does not have a deep semantic understanding of which attributes are boolean ones, which are strings, etc. When the value is null or undefined for any attribute, Angular removes it.

The solution is to do the following:

[attr.inert]="someBoolean ? '' : null"

Which will then insert inert when the boolean is true, and null when false, resulting in Angular removing the inert attribute