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.

The `disabled` attirbute is special. Its mere presence means the element is disabled. It's value is ignored. — , Jun 08 '17 at 12:23

score 1 · Answer 1 · answered Jun 08 '17 at 12:11

1

The [...] syntax is for property binding. More information here.

I recommend you to follow the Tour of Heroes tutorial, made by Google. It explains the basics about Angular (v2,v4) and help you to create your first cool application. You can find it here.

answered Jun 08 '17 at 12:11

Stefan

321
1
2
9

This does not address the question, which was specifically about `disabled`. – Jun 08 '17 at 12:23

score 1 · Answer 2 · answered Jun 08 '17 at 12:21

1

The [] syntax tells angular to bind information from the data source (component instance) with the template (html).
What is your question?

answered Jun 08 '17 at 12:21

Jota.Toledo

27,293
11
59
73

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

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 :)

you are doing it the right way. Only thing is that you are changing it to true after 8 secs using setTimeout. and in UI you have a `! not` operator so when its true it will be disabled and when false enabled. try updating the property on a button click instead of `setTimeout` — Manish, Jun 08 '17 at 12:27

score 1 · Answer 4 · answered Jun 08 '17 at 12:24

For #2 - your assumption is right for most html and custom attributes. But disabled is special case. HTML specification expects to have that attribute without value for disabled elements and not having it for the rest cases. I.e. <input disabled="true"> is not right way to code HTML. Moreover, most browsers will disable your field when you have <input disabled="false">. That's why angular removes it.

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

4 Answers4