title: angular6: passing value of the input field to the component
body: <p>I am trying to pass value of the input field to the component class. But it does not seem to be working. Please find the code below:</p>
  
  <p>todoinput.component.html</p>
  
  <pre><code>&lt;mat-card&gt;
    &lt;form&gt;
      &lt;mat-form-field class="example-full-width"&gt;
        &lt;input matInput type="text" name="todo" placeholder="Enter a todo"&gt;
      &lt;/mat-form-field&gt;
      &amp;nbsp; &amp;nbsp;
      &lt;button mat-raised-button color="primary" type="button" (click)="addTodo(todo.value)"&gt;Add Todo
      &lt;/button&gt;
    &lt;/form&gt;
  &lt;/mat-card&gt;
  </code></pre>
  
  <p>todoinput.component.ts</p>
  
  <pre><code>  addTodo(text) {
      this._todosService.addTodo({
        text: text,
      }).subscribe((todo) =&gt; {
        return this.newTodo.emit(todo);
      })
    }
  </code></pre>
  
  <p>But clicking on the button throws the error below:</p>
  
  <pre><code>ERROR TypeError: Cannot read property 'value' of undefined
      at Object.eval [as handleEvent] (TodoinputComponent.html:7)
      at handleEvent (core.js:10258)
  </code></pre>
  
  <p>I am using angular material framework for rendering the elements. Could anyone let me know what am I doing wrong here ?</p>
  
  <p>Thanks</p>