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

Table of Contents

    @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

    176 posts

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