Routing Angular 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:

Table of Contents

      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

    176 posts

    Founder of Google Developer Expert in Web Technologies. Slapping the keyboard until something good happens.