Angular: How to conditionaly add an attribute in the template after checking if a variable is defined?

Question

How to conditionaly add an attribute in the template after checking if a variable is defined? I want to add an attribute with the variable value to an HTML tag, but this variable might not exist. How can I check that?

In the following example, myVariable might not be defined in the component and it will throw an error:

<i class="fa fa-file-excel-o" title="myVariable ? myVariable : null"></i>

Answer 1

<i class="fa fa-file-excel-o" [attr.title]="myVariable ? myVariable : null"></i>

Normally the attribute should disappear when the binding value is null

https://stackblitz.com/edit/angular-ivy-2rr8hk

Answer 2

You forget the [] around your attribute name to make it bindable: <i class="fa fa-file-excel-o" [title]="myVariable? myVariable: ''"></i>