How exactly works the Angular 2 property binding? What really happens in this example?

Question

I am an absolute beginner with Angular 2 and I have the following doubt relate property binding.

This example works but I have doubt about what exactly happen under the hood.

I have a component view (the servers.component.html file) containing this button:

<button [disabled]="!allowNewServer" class="btn btn-primary">Add Server</button>

The related component is:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-servers',
  templateUrl: './servers.component.html',
  styleUrls: ['./servers.component.css']
})
export class ServersComponent implements OnInit {
  allowNewServer = false;

  constructor() {
    setTimeout(() => {
      this.allowNewServer = true;
    }, 8000);
  }

  ngOnInit() {
  }

}

As you can see at the beginning the allowNewServer value is false, after 8 seconds it is setted to true by a function declared in the constructor.

On my button is setted this disabled attribute:

 [disabled]="!allowNewServer"

So at the beginning the button is disabled and after 8 seconds it will enabled.

Mu doubts are:

1) What exactly means the [...] Angular syntax?

2) I expected that was rendered something like disabled=true (at the beginning) and after 8 seconds something like disabled=dalse, but after 8 seconds simply the disable attribute is deleted. So I think that I am not understending what the [...] syntax mean.

Answer 1

To answer your question

What exactly means the [...] Angular syntax?

The above syntax is for data binding. As the official docs say.

Write a template property binding to set a property of a view element. The binding sets the property to the value of a template expression.An element property between enclosing square brackets identifies the target property

To answer you second question

I expected that was rendered something like disabled=true (at the beginning) and after 8 seconds something like disabled=false, but after 8 seconds simply the disable attribute is deleted. So I think that I am not understending what the [...] syntax mean.

[disabled]="!allowNewServer"

this line of cod will be do is that it will set the disabled attribute to true or false based on allowNewServer. But disabled is a Boolean attribute i.e means just the presence of the attribute means its set to true and absence means it false. Official Docs say

A number of attributes are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.

So when the value is set to false which is not considered as a valid value angular removes the attribute as its considered that absence means false. Hence the behavior.

For Reference:

Boolean Attributes

Property binding

Hope it helps :)