#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:
Vamos adicionar um elemento de input e um botão no template:
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:
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:
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.
Substitua um ou ambos os bindings do título no template pela chamada do método (não se esqueça dos parênteses!):
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
:
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
Angular Guide - Template Property Binding
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.
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:
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!
Last updated