Binding Values ​​to DOM Element Properties in Angular

In Angular, there are two types of binding values ​​to tags: to a tag attribute and to a DOM element property. As a rule, these are the same thing, but sometimes they matter.

Let's look at these two methods with examples. Let's say we have the following class property:

app/app.component.tsexport class AppComponent {
  public text: string = 'abcde';
}

Let's output the value of this property to text textarea

app/app.component.html<textarea>{{ text }}</textarea>

And now in the attribute placeholder:

app/app.component.html<textarea placeholder="{{ text }}"></textarea>

Now let's write the data to the DOM element property. To do this, we'll put the attribute name in square brackets:

app/app.component.html<textarea [value]="text"></textarea>