Nosso objeto foto não foi atualizado porque fizemos uma associação unidirecional, dos dados para a view. Por mais que digitemos um novo título, essa informação nunca será enviada para nosso componente. Precisamos de alguma maneira fazer a medida que digitarmos com os dados associados à nossa view também sejam atualizados em nosso componente. O problema é que não há data binding bidirecional, aquele que atualiza os dados quando a view é alterada e que altera a view quando os dados são alterados. E agora?

Que tal disparamos a atualização dos dados toda vez que o evento input do nosso elemento for disparado? Poderíamos pegar o valor atual e atualizar os dados da foto. Para isso, existe um outro tipo de data binding, unidirecional também, mas que flui da view para os dados, é o data binding de eventos (event data binding). Ele é caracterizado por parênteses que envolvem o nome do evento que desejamos executar. Alterando nosso formulário:

<!-- alurapic/client/app/cadastro/components/cadastro.html -->

<div class="container">

    <form (submit)="cadastrar($event)" class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label>Título</label>
                <input
                    (input)="foto.titulo = $event.target.value"
                    [value]="foto.titulo"
                    class="form-control"  autocomplete="off">    
            </div>
            <div class="form-group">
                <label>URL</label>
                <input
                    (input)="foto.url = $event.target.value"
                    [value]="foto.url"
                    class="form-control"  autocomplete="off">
            </div>
            <div class="form-group">
                <label>Descrição</label>
                <textarea>
                    (input)="foto.descricao = $event.target.value"
                    [value]="foto.descricao"
                    class="form-control"  autocomplete="off">
                </textarea>
            </div>

            <button type="submit" class="btn btn-primary">
                Salvar
            </button>
             <a [routerLink]="['']" class="btn btn-primary">Voltar</a>
            <hr>
        </div>
    </form>
</div>

Veja que essa sintaxe e um tanto enigmática. Toda vez que o evento input for disparado, dizemos que o dado foto.titulo em nosso componente receberá como valor $event.target.value. O $event é um objeto do Angular que encapsula o evento original do JavaScript e que sabe tudo sobre o evento que foi disparado. Através desse objeto podemos saber quem foi o alvo (target) do evento. Se sabemos o target, podemos consultar o seu valor e capturar o que o usuário digitou.

Recarregando a página e testando vemos que à medida que vamos digitando nossa variável local é atualizada, inclusive o título da nossa página via AE também é atualizado. Uma maravilha!