Fork me on GitHub
Note: The Socially 2 tutorial is no longer maintained. Instead, we have a new, better and comprehensive tutorial, integrated with our WhatsApp clone tutorial: WhatsApp clone tutorial with Ionic 2, Angular 2 and Meteor (we just moved all features and steps, and implemented them better!)

Bindings

Note: If you skipped ahead to this section, click here to download a zip of the tutorial at this point.

In this step we are going to:

  • add a form to the party details view
  • bind a party object to the view, so that we'll be able to change party details and then save changes to the storage

Two-Way Data Binding

As we've already explored on the 3rd step, data can be bound to the HTML input elements with the help of a group of special Angular 2 Control objects, otherwise called a form model. We called this approach the Model-Driven approach.

Also, it was mentioned that Angular 2 has support of two-way data binding through a special attribute, though with different syntax from Angular 1. We'll get to this shortly.

First, let's bind the party details into our view:

1
2
3
4
5
6
7
<header *ngIf="party">
  <h2>{{party.name}}</h2>
 
  <p>{{party.description}}</p>
 
  <p>{{party.location}}</p>
</header>

Now, let's change party-details.component.html into a form, so that we can edit the party details:

7.2 Create form inside PartyDetails template client/imports/app/parties/party-details.component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
<form *ngIf="party" (submit)="saveParty()">
  <label>Name</label>
  <input type="text" [(ngModel)]="party.name" name="name">
 
  <label>Description</label>
  <input type="text" [(ngModel)]="party.description" name="description">
 
  <label>Location</label>
  <input type="text" [(ngModel)]="party.location" name="location">
 
  <button type="submit">Save</button>
  <a [routerLink]="['/']">Cancel</a>
</form>

Notice we have a routerLink button on the page that redirects back to the list (from our previous step's challenge). Here is how to do that:

We added an ngIf directive to conditionally display the form when the party data is available.

ngModel

ngModel binds a HTML form to the component's model, which can be an object of any type, in comparison to the Model-Driven binding where the FormGroup instance is used.

The syntax looks a bit different, using both square and rounded brackets: [(ngModel)]. ngModel binds to the party properties and fills out the inputs, and vice versa.

Let's do a little test to see how form controls and events work in Angular 2. Start by binding to party.name below the input, then experiment by changing the input's text.

<label for="name">Name</label>
<input type="text" [(ngModel)]="party.name" name="name">

<p>\{{party.name}}</p>

Notice that it updates automatically on changes. You can contrast this to FormControls which we need to update manually using events to reach this functionality.

As a finishing touch, let's add a submit event handler that saves the current party:

32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
      });
  }
 
  saveParty() {
    Parties.update(this.party._id, {
      $set: {
        name: this.party.name,
        description: this.party.description,
        location: this.party.location
      }
    });
  }
 
  ngOnDestroy() {
    this.paramsSub.unsubscribe();
  }

Summary

In this step, we learned:

  • how two-way data binding works in Angular 2 using [(ngModel)]
  • how to bind inputs to the view and save the data