What is the difference between matTooltip and [matTooltip]?

Question

I would like to know the difference and

how the binding of values happen in the following cases . for example

1. [matTooltip]

2. matTooltip(without the bracket)

3. (click)

Thanks

Answer 1

1) With brackets - Takes a variable value; e.g

const myTooltip: string = 'My tooltip text'

<button [matTooltip]="myTooltip">Click</button>

Use when your tooltip text may vary based on conditions, so you control the text from your component logic.

---

2) Without brackets - Takes a string value directly; e.g

<button matTooltip="My tooltip text">Click</button>

Use when your tooltip will never change, so you keep the text directly in the template.

---

3) Event handler - takes a function; e.g

<button (click)="myButtonClickHandler()">Click</button>

Answer 2

I think you need to check this link : https://angular.io/guide/template-syntax

It contain all what you need to know about the Template Syntax and more, This page is a comprehensive technical reference to the Angular template language. It explains basic principles of the template language and describes most of the syntax that you'll encounter elsewhere in the documentation.

I hope that will help you !