Angular8: What is the difference between [attr.title]='myVar' and [title]='myVar'?

Question

Why do some attributes require the "attr." prefix and some don't?

Answer 1

Short answer: [title]="myVar" is property binding whereas [attr.title]="myVar" is attribute binding.

Attribute binding must be used, when DOM property doesn't exist. For example, colspan does not exist DOM property and you must use attr.colspan="...". When you try use colspan="..." you get an error in console. Read up on attribute binding here.