Video Course

Routing Angular v2+ Applications: Lesson 20 of 23

Dashboard User Details Form

Up Next

CanActivate and CanActivateChild

Autoplaying in 7 seconds!

Cancel

We'll be creating the form inside of our dashboard-user-details.component.ts. To do that, we need to bring in FormsModule into the DashboardModule.

Once we've imported the FormsModule, we have access to two-way data-binding in the form of [(ngModel)].

We can then update the dashboard-user-details.component.ts template with:

@Component({
  template: `
    <div class="jumbotron">
      <div *ngIf="user">
        <h2>{{ user.name }}</h2>
        <div class="form-group">
          <input type="text" [(ngModel)]="editName" class="form-control">
        </div>
        <div class="form-group text-center">
          <button (click)="cancel()" class="btn btn-danger">Cancel</button>
          <button (click)="save()" class="btn btn-success">Save</button>
        </div>
      </div>
    </div>
  `
})

We'll also be creating a way to cancel or save changes. We just need to add the event binding (click) in our templates and then create the functions in our class.

  save() {
    this.user.name = this.editName;
    this.router.navigate(['/dashboard/users']);
  }

  // dont save. navigate to /dashboard/users
  cancel() {
    this.router.navigate(['/dashboard/users']);
  }

Chris Sevilleja

157 posts

Co-founder of Scotch.io. Slapping the keyboard until something good happens.