#6: 📥 Vinculação de propriedades
Agora temos nosso componente input-button-unit, mas ele não faz muita coisa. Nós queremos dar vida a ele.
Vamos adicionar um elemento de input HTML e fazer com que o texto do controle reflita no valor da propriedade 'title'
Vamos reverter o componente para esse estado antes dos nossos experimentos com seus métodos:
src/app/input-button-unit/input-button-unit.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-input-button-unit',
template: `
<p>input-button-unit works! The title is: {{ title }}</p>
`,
styleUrls: ['./input-button-unit.component.css']
})
export class InputButtonUnitComponent implements OnInit {
title = 'Hello World';
constructor() {}
ngOnInit() {}
}
Vamos adicionar um elemento de input e um botão no template:
src/app/input-button-unit/input-button-unit.component.ts
template: `
<p>
input-button-unit works!
The title is: {{ title }}
</p>
<input>
<button>Save</button>
`,
Lembrete: Nós utilizamos interpolação para apresentar o valor da propriedade title : {{ title }}. O Angular irá apresentar o valor de title cada vez que nosso componente app-input-button-unit for visualizado.
E se quisermos mostrar o valor do título dentro do próprio controle input do HTML?
Todo elemento input tem uma propriedade chamada value, que contém a string que é vista dentro da caixa do input. No HTML, nós podemos passar a string diretamente pelo atributo value do elemento:
src/app/input-button-unit/input-button-unit.component.ts
<input value="Hello World">
Porém nós perdemos o bind dinâmico entre as propriedades do controller e do template.
O Angular permite ligar as propriedades do template de uma forma fácil e conveniente; Nós vimos isso através da interpolação. Agora nós veremos como fazer o bind a uma propriedade do elemento (não confunda com a propriedade da classe). Nós cercamos a propriedade que queremos com colchetes e assim passamos para o membro da classe:
src/app/input-button-unit/input-button-unit.component.ts
<input [value]="title">
Tente isso e veja o resultado no navegador!

a# Binding para Métodos

As expressões que podemos fazer o bind no template não são limitadas às propriedades da classe. Elas podem ser uma chamada de método ou qualquer outra expressão JavaScript válida.
Por exemplo, vamos fazer o bind do value de um input para a chamada de um método que retorna um valor. Primeiro, vamos adicionar o método generateTitle() em qualquer lugar dentro da classe exceto dentro de algum dos seus métodos.
src/app/input-button-unit/input-button-unit.component.ts
generateTitle(): string {
return 'This title was generated by a method.';
}
Substitua um ou ambos os bindings do título no template pela chamada do método (não se esqueça dos parênteses!):
src/app/input-button-unit/input-button-unit.component.ts
<input [value]="generateTitle()">
{{ generateTitle() }}

b# Detecção de mudança (Change Detection)

Angular tem um mecanismo de detecção de mudança muito eficiente. Ele procura por bindings no template do componente e então atualiza o valor toda vez que a expressão ligada é alterada.
Para exibir isto, vamos mudar o valor do título depois de alguns segundos e ver o que acontece. Chame a função setTimeout dentro de ngOnInit:
src/app/input-button-unit/input-button-unit.component.ts
ngOnInit() {
setTimeout(() => {
this.title = 'This is not the title you are looking for';
}, 3000);
}
setTimeout é uma função JavaScript. Seu primeiro parâmetro é o que queremos que aconteça - uma função de nossa escolha. O segundo parâmetro é o quanto queremos atrasá-la, em milissegundos. Neste exemplo, nós passamos uma função anônima que altera o valor de this.title. Para isto nós usamos uma das novas features do JavaScript (ES6) arrow function.

c# Binding para Métodos

As expressões que podemos fazer o bind no template não são limitadas às propriedades da classe. Elas podem ser uma chamada de método ou quase qualquer expressão de template Angular válida.

d# Recursos

e# Nota sobre acesso ao DOM

Usando JavaScript puro, podemos inserir o valor para um input através de suas propriedades. Nós vamos buscar o elemento do DOM e atribuir o valor da propriedade title para a propriedade value do elemento.
code for example
let inputElement = document.getElementById('my-input');
inputElement.value = this.title;
Com JavaScript, nós encontramos o elemento input no DOM através do seu id, e então alteramos sua propriedade value para o valor da variável title. Nós precisamos adicionar o id ao elemento input, então:
code for example
<input id="my-input">
Isso irá funcionar no navegador
De qualquer forma, isto é altamente desencorajado no Angular. Você nunca pode acessar o DOM diretamente! Isso é porque você pode atribuir diferentes renders para o Angular e executar a aplicação em diferentes plataformas. Elas podem ser mobile, desktop, o até um robô. E elas não terão um objeto document do qual você poderia manipular o resultado!
Copy link
On this page
a# Binding para Métodos
b# Detecção de mudança (Change Detection)
c# Binding para Métodos
d# Recursos
e# Nota sobre acesso ao DOM