#8: 📎 O elemento ref - #
Ao final do último capítulo, nosso component input estava apto para exibir e mudar o título do nosso item. O arquivo input.component.ts deve estar assim:
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>
<input [value]="title"
(keyup.enter)="changeTitle($event.target.value)">
<button (click)="changeTitle('Button Clicked!')">
Save
</button>
`,
styleUrls: ['./input-button-unit.component.css']
})
export class InputButtonUnitComponent implements OnInit {
title = 'Hello World';
constructor() { }
ngOnInit() {
}
changeTitle(newTitle: string) {
this.title = newTitle;
}
}
Primeiro, devemos remover uma parte do template que não precisamos. Remova estas linhas:
remove this from src/app/input-button-unit/input-button-unit.component.ts
<p>
input-button-unit works!
The title is: {{ title }}
</p>
Agora queremos pegar o valor do input (que o usuário digitou) e mudar o título quando o botão Save for clicado.
Nos já sabemos como criar um botão e capturar o evento de clique. Agora precisamos passar para o método valores de um elemento diferente. Queremos usar o valor do input dentro do elemento button.
O Angular nos ajuda a fazer exatamente isso. Nós conseguimos guardar a referência de um elemento que queremos em uma variável com o nome que escolhermos, por exemplo inputElementRef, usando uma sintaxe simples - um hash. Adicione #inputElementRef no elemento de input e use no evento click do botão:
src/app/input-button-unit/input-button-unit.component.ts
template: `
<input #inputElementRef
[value]="title"
(keyup.enter)="changeTitle($event.target.value)">
<button (click)="changeTitle(inputElementRef.value)">
Save
</button>
`,
Agora podemos usar o valor que o usuário inseriu no elemento de input dentro do método chamado pelo clique do botão Save!

O que é a # que usamos?

O Angular nos permite definir uma variável local chamada inputElementRef (ou um nome de sua preferência), que contém a referência do elemento definido, e utilizá-la da forma que desejarmos. No nosso caso, nós usamos para acessar a propriedade value do input.
Ao invés de buscar os elementos via DOM query (que é uma prática ruim, como já discutimos anteriormente), agora podemos inserir referências via template e acessar o elemento que queremos declarativamente.
Em seguida, vamos criar a lista.
Copy link