> For the complete documentation index, see [llms.txt](https://nggirls-australia.gitbook.io/tutorial/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nggirls-australia.gitbook.io/tutorial/workshop-todo-list/element-ref.md).

# #8: 📎 Element ref - \#

In the last chapter, we ended with our input component able to display and change the title of our todo item. `input-button-unit.component.ts/html` should look like this:

```markup
src/app/input-button-unit/input-button-unit.component.html

    <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>
```

{% code title="src/app/input-button-unit/input-button-unit.component.ts" %}

```typescript
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-input-button-unit',
  templateUrl: './input-button-unit.component.html',  
  styleUrls: ['./input-button-unit.component.css']  
})    
export class InputButtonUnitComponent implements OnInit {
  title = 'Hello World';

  constructor() { }                     

  ngOnInit() {
  }

  changeTitle(newTitle: string) {
    this.title = newTitle;
  }
}
```

{% endcode %}

First let's remove a bit of the template that we don't need. Remove these lines:

{% code title="remove this from src/app/input-button-unit/input-button-unit.component.html" %}

```markup
<p>
  input-button-unit works!
  The title is: {{ title }}
</p>
```

{% endcode %}

Now we want to take the value of the input (that the user typed) and change the title when we press the `Save` button.

We already know how to create a button and react to clicking on it. We now need to pass some data from a different element to the method. We want to use the `input` element's value from inside the `button` element.

Angular helps us do exactly that. **We can store a reference to the element we want in a variable with the name we choose,** for example `inputElementRef`, **using a simple syntax - a hash.** Add `#inputElementRef` to the `input` element, and use it in the `click` event of the button:

{% code title="src/app/input-button-unit/input-button-unit.component.html" %}

```markup
  <input #inputElementRef
         [value]="title"
         (keyup.enter)="changeTitle($event.target.value)">

  <button (click)="changeTitle(inputElementRef.value)">
    Save
  </button>
```

{% endcode %}

Now we can use the value that the user entered in the `input` element directly in the method call to handle clicking the `Save` button!

## What is that `#` we see?

Angular lets us define a new local variable named `inputElementRef` (or any name you choose) that holds a reference to the element we defined it on, and then use it any way we want. In our case, we use it to access the `value` property of the `input`.

Instead of hunting down the elements via a DOM query (which is bad practice, as we discussed), we now can put element references in the template and access each element we want to declare.

Next, we'll [build the list of todo items](https://nggirls-australia.gitbook.io/tutorial/workshop-todo-list/the-to-do-list).

{% hint style="success" %}
[See the results on StackBlitz](https://stackblitz.com/github/ng-girls/todo-list-tutorial/tree/master/examples/08-element-ref)
{% endhint %}