CODEWITHSUNDEEP
javascriptangularangular2-databinding
AndreaNobili
AndreaNobili

Reputation: 42957

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

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.

Upvotes: 0

Views: 501

Answers (4)

A. Tim
A. Tim

Reputation: 3196

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.

Upvotes: 1

Manish
Manish

Reputation: 5056

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

Upvotes: 1

Jota.Toledo
Jota.Toledo

Reputation: 28434

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

Upvotes: 1

Stefan
Stefan

Reputation: 321

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.

Upvotes: 1

Related Questions