Data binding¶

The expected state of the application after the end of the "Service and CRUD" section: [get code]

Data binding is a technique that enables data to be bound to a view layer. By binding a variable, we tell Angular to watch its changes. If changes are detected, the framework will take care of updating the view accordingly.

Display the list of students¶

Modification of students.component.ts¶

We have created appropriate methods on our website, but for now, we do not use them anywhere. It's time to change that. Let's open src/app/students/students.component.ts and modify it a bit as described below.

Let's start with importing the student model and the StudentService website:

import { Student } from '../student';
import { StudentService } from '../student.service';

Immediately before the constructor, let's define a variable students with an array typeStudent:

students: Student[];

Then, let's inject the imported website into the constructor:

constructor(private studentService: StudentService) { }

Now it would be appropriate to create a method that would pull student data into the students array using the service:

getStudents(): void {
  this.studentService.getStudents()
    .subscribe(students => this.students = students);
}

All that's left to do is call it inside the hook of the ngOnInit() life cycle:

ngOnInit(): void {
  this.getStudents();
}

While it could be called in the constructor, it is not a best practice. The constructor should not deal with this, much less call a function that makes HTTP requests to the remote server. Reserve it for simple initialization.

Modification of students.component.html¶

Let's change the component template so we can render data from the site. Go to src/app/students/students.component.html and edit the contents of the<tbody>tag to replace static values with dynamic ones:

<tbody>
  <tr *ngFor="let student of students">
    <td>{{student.id}}</td>
    <td>{{student.name}}</td>
    <td>
      <a href="mailto:{{student.email}}">{{student.email}}</a>
    </td>
    <td>
      <a href="#" class="button button-green">Edytuj</a>
      <button class="button button-red">Usuń</button>
    </td>
  </tr>
</tbody>

Now let's take a look at what we just did. As you may have guessed, we've added a new data binding to the template:

• *ngFor: we use the for...of loop to iterate through the students object array defined in the component. In this case, it will repeat the contents of the table row tag <tr> as many times as the number of students returned by the service.
• {{student.id}}: display individual properties of a given object by string interpolation*.

Removing a student¶

Modification of students.component.ts¶

Add the method delete () to the component class:

delete(student: Student): void {
  this.students = this.students.filter(s => s !== student);
  this.studentService.deleteStudent(student).subscribe();
}

Although the component delegates the removal of students to StudentService, it remains responsible for updating its own students list. The delete () method immediately removes the student from the component table in the condtion that StudentService will be successful on the server.

Updating students.component.html¶

Each student has a delete button on the student list, but takes no action. So let's add an * event binding * to clicking on this button, which will call the delete () method:

<button class="button button-red" (click)="delete(student)">Usuń</button>