Video Course

Routing Angular v2+ Applications: Lesson 20 of 23

Dashboard User Details Form

Up Next

CanActivate and CanActivateChild

Autoplaying in 7 seconds!


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:

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

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.editName;

  // dont save. navigate to /dashboard/users
  cancel() {

Chris Sevilleja

157 posts

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