Developing Mobile Apps with Ionic and Angular/

...

/

Implementing a Student Roster

Implementing a Student Roster

Learn how an Angular service can be accessed from a page to display its data.

We'll cover the following...

Now, you need to put those students you just created in Students service into the Roster Page. The Roster Page at src/app/roster/roster.page.ts is opened for you in the application below.

import { AppPage } from './app.po';

describe('new App', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
  });
  describe('default screen', () => {
    beforeEach(() => {
      page.navigateTo('/Inbox');
    });
    it('should say Inbox', () => {
      expect(page.getParagraphText()).toContain('Inbox');
    });
  });
});
Implementing student roster

Following is the Roster page that we are going to implement:

Implementing Roster

Just before the constructor (in the application above), create an array of students to hold the list you will retrieve from the StudentsService:

//This will hold the list of students 
students: Student[] = [];

Next, you need to inject a reference to the StudentsService into the page’s constructor. Insert a new private parameter studentService, of type StudentsService.

constructor(
  private studentService: StudentsService) { }

Do not forget to import Student and StudentsService from ../students.service. Make sure you get the casing right, or Angular will not be happy with you. Marking the parameter private automatically exposes the parameter as a member of the component class. It is a handy shortcut TypeScript provides.

By default, the Roster Page implements Angular’s OnInit interface, which requires you to implement the OnInit Angular ...