title: How to fix 'ERROR TypeError: Cannot read property 'username' of undefined' in ANGULAR
body: <p>i'm trying to edit user with angular and laravel ,so i'm trying to passing user from front-end to back-end but i faced this error</p>
  
  <p>I'm using angular material with this project</p>
  
  <p>edit-user-dialog.component.ts:</p>
  
  <pre><code> import { Component, OnInit ,Inject } from '@angular/core';
  import {MatDialogModule} from '@angular/material/dialog';
  import {
    UsersService
  } from 'src/app/services/users.service';
  import {
    MatDialogRef,
    MAT_DIALOG_DATA,
    MatTableDataSource
  } from '@angular/material';
  import { User } from 'src/app/Models/User';
  import {
    ToastrService
  } from 'ngx-toastr';
  import { DialogData } from 'src/app/products/add-product/add-product.component';
  
  @Component({
    selector: 'app-edit-user-dialog',
    templateUrl: './edit-user-dialog.component.html',
    styleUrls: ['./edit-user-dialog.component.css']
  })
  export class EditUserDialogComponent implements OnInit {
    User:User;
  
    constructor(public dialogRef: MatDialogRef &lt; EditUserDialogComponent &gt; ,
      // tslint:disable-next-line: max-line-length
      @Inject(MAT_DIALOG_DATA)  public data: any, private toast: ToastrService, private userservice: UsersService, ) { }
    ngOnInit() {
    }
    onNoClick(): void {
      this.dialogRef.close();
  }
  EditUser()
  {
    let user: User;
    user.id = this.data.user.id
    user.username = this.User.username
    user.firstname = this.User.firstname
    user.lastname = this.User.lastname
    user.address = this.User.address
    user.emailaddress = this.User.emailaddress
    console.log(User);
    this.userservice.EditUser(User).subscribe(data =&gt; {
      this.toast.success('Success', 'Order edited!')
      this.dialogRef.close();
      //this.isLoading = false;
  }, error =&gt; this.toast.error('Error', 'error.message'));
  }
  
  }
  </code></pre>
  
  <p>edit-user-dialog.component.html:</p>
  
  <pre><code>     &lt;div class="control-panel"&gt;
  
  
     &lt;form class="example-form"&gt;
  
  
    &lt;table class="example-full-width" cellspacing="0"&gt;
       &lt;tr&gt;
            &lt;td&gt;&lt;mat-form-field class="example-full-width"&gt;
              &lt;input matInput placeholder="Username"[(ngModel)]="User.username"&gt;
            &lt;/mat-form-field&gt;&lt;/td&gt;
        &lt;/tr&gt; 
      &lt;tr&gt;
      &lt;td&gt;&lt;mat-form-field class="example-full-width"&gt;
        &lt;input matInput placeholder="First name" [(ngModel)]="User.firstname"&gt;
      &lt;/mat-form-field&gt;&lt;/td&gt;
      &lt;td&gt;&lt;mat-form-field class="example-full-width"&gt;
        &lt;input matInput placeholder="Last name" [(ngModel)]="User.lastname"&gt;
      &lt;/mat-form-field&gt;&lt;/td&gt;
    &lt;/tr&gt;&lt;/table&gt;
  
    &lt;p&gt;
      &lt;mat-form-field class="example-full-width"&gt;
        &lt;textarea matInput placeholder="Address" [(ngModel)]="User.address"&gt;&lt;/textarea&gt;
      &lt;/mat-form-field&gt;
      &lt;mat-form-field class="example-full-width"&gt;
        &lt;textarea matInput placeholder="Emial Address" [(ngModel)]="User.emailaddress"&gt;&lt;/textarea&gt;
      &lt;/mat-form-field&gt;
    &lt;/p&gt;
  
    &lt;button mat-fab color="warn" (click)="EditUser(User)"&gt;Edit User&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>users.service.ts:</p>
  
  <pre><code> import { Injectable } from '@angular/core';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  import { Observable } from 'rxjs';
  @Injectable({
    providedIn: 'root'
  })
  export class UsersService {
    public token: string = sessionStorage.getItem('token');
    public resID: string = sessionStorage.getItem('ID');
    private _UsersUrl = "http://127.0.0.1:8000/api/users";
    private _EditUserUrl = "http://127.0.0.1:8000/api/user/";
    constructor(private http: HttpClient) { }
  
  
  
    getUsers() : Observable&lt;any&gt;{
  
      let headers = new HttpHeaders({
        'Authorization': 'Bearer ' + this.token ,
      });
      let option = { headers: headers };
      return this.http.get&lt;any&gt;(this._UsersUrl , option).pipe()
    };
    EditUser(User) : Observable&lt;any&gt;{
  
      let headers = new HttpHeaders({
        'Authorization': 'Bearer ' + this.token ,
      });
      let option = { headers: headers };
      return this.http.put&lt;any&gt;(this._UsersUrl + User.id , option).pipe()
    };
  
  
  }
  </code></pre>
  
  <p>How can i fix this error and passing user to laravel</p>