At this point we have our basic application running and we essentially have "Hello, World" going in our browser. That's a great start, but it doesn't really do anything for us. Let's build out the application by displaying a list of students in the UI. We're not going to worry about styling right now. Instead we're just going to show each student in a separate div. We can style it later (or not, whatever).
Let's take an object-oriented approach to this part (I know, "object-oriented approach to JavaScript?!?!", but yes. We're using TypeScript and the newer versions of the ECMAScript specification support designing objects). What is a student? For our purposes we're going to say a student has the following characteristics:
- id
- name
- teacherId
- age
If we were writing in C# we'd create a POCO that represents a single student and specify somewhere that we have a List<Student>. Since this is TypeScript we're going to do things slightly differently. Create a new folder under src/app and name it "common" (obviously without the quotes). In your command prompt, navigate to that new folder (so I navigated to D:\Dev\Learning\Angular2\cli\ProveIt\src\app\common) and run the command ng g interface student. This creates a new interface called student in the common folder. Go ahead and open that file (src/app/common/student.ts) and you'll see that it's pretty simple at this point. It's just a declaration and export of what amounts to a POCO - or in this case a POJSO (Plain Old JavaScript Object).
We can add our properties to the interface and specify their type. Our new interface looks like this:
We can add our properties to the interface and specify their type. Our new interface looks like this:
export interface Student { id: number; name: string; teacherId: number; age: number; }
All we've done here is specify what a Student looks like to us. Now we're going to use our Student interface in our StudentsComponent. Open src/app/students/students.component.ts and import the new Student interface at the top of the file.
import { Student } from'../common/student';
Now that we have our Student interface available to us, we'll create a property on our StudentComponent that is an array of Students. Just inside the creation of the StudentComponent class (so this would be above the constructor) add this line: students: Student[] = [];. This tells Angular that our every single object in our students array is going to implement the Student interface. Doing this gives us type checking while we develop. In Angular! How cool is that!?
Go ahead and populate the students array with 5 students. Just make up the information. I usually use pop culture characters and consecutive numbers for ids.
If you're not already serving your application you should do that now and make sure everything still works properly. In your command prompt navigate to the application directory (so mine is D:\Dev\Learning\Angular2\cli\ProveIt) and run the ng serve --open command. You should still see "students works!" as the only thing on the page. We're about to change that.
Open your students.component.html file and replace the contents of the file with this:
Go ahead and populate the students array with 5 students. Just make up the information. I usually use pop culture characters and consecutive numbers for ids.
If you're not already serving your application you should do that now and make sure everything still works properly. In your command prompt navigate to the application directory (so mine is D:\Dev\Learning\Angular2\cli\ProveIt) and run the ng serve --open command. You should still see "students works!" as the only thing on the page. We're about to change that.
Open your students.component.html file and replace the contents of the file with this:
<div *ngFor="let student of students"> {{student.id}} {{student.name}} {{student.teacherId}} {{student.age}} </div>
If you look at your application now you'll see each student's information listed on a separate line. Sweet! That's what we were going for. Remember that at least for now we don't really care how it looks. In a future installment of this guide we're going to bring in Bootstrap and style this up a little bit better. For now we have a little bit more work to do.
Let's create another component; one that allows us to view the details of a student. Right now we only have a little bit of information about them, but we want to be able to see more. To create a new component we'll use Angular CLI from the command prompt. Go to src/app and run the command ng g component student to create a new StudentComponent. If you're worried that the name will be too easy to confuse with the current StudentsComponent you can name it something else (like student-detail) if you want.
Open the newly created student.component.ts and we're going to jump right in to making some changes. Right away we want to import Input from @angular/core so you can just add it after the import of OnInit (in the same curly brace). We also want to import the Student interface like we did in the StudentsComponent. In fact, you can copy that line exactly from StudentsComponent into StudentComponent. Next we'll add an input property called student. Add this line just above the constructor: @Input() student: Student; Setting the @Input() decorator on this property tells Angular that we're going to get this value as an input wherever the StudentComponent is used. Add city (as a string) to the Student interface, then update the list of students so that each student has a city.
In student.component.ts replace the templateUrl with an inline template by replacing the entire templateUrl line with this: template: '<p>{{student.name}} lives in {{student.city}}</p> So now all we need to do is figure out which student's information to show and how to show it. We're going to go back to students.component.html and make a few changes now. Oh, you can delete student.component.html if you want to since we're not using it anymore.
Back in students.component.html we're going to add a click handler on the main div that's repeating for each student. When the user clicks on a student in the list of students we're going to invoke a function called show and pass the current student to that function: (click)="show(student)" You'll want to add that to the <div> that has the *ngFor on it. Down below that <div> we're going to introduce the student component by adding this code:
Let's create another component; one that allows us to view the details of a student. Right now we only have a little bit of information about them, but we want to be able to see more. To create a new component we'll use Angular CLI from the command prompt. Go to src/app and run the command ng g component student to create a new StudentComponent. If you're worried that the name will be too easy to confuse with the current StudentsComponent you can name it something else (like student-detail) if you want.
Open the newly created student.component.ts and we're going to jump right in to making some changes. Right away we want to import Input from @angular/core so you can just add it after the import of OnInit (in the same curly brace). We also want to import the Student interface like we did in the StudentsComponent. In fact, you can copy that line exactly from StudentsComponent into StudentComponent. Next we'll add an input property called student. Add this line just above the constructor: @Input() student: Student; Setting the @Input() decorator on this property tells Angular that we're going to get this value as an input wherever the StudentComponent is used. Add city (as a string) to the Student interface, then update the list of students so that each student has a city.
In student.component.ts replace the templateUrl with an inline template by replacing the entire templateUrl line with this: template: '<p>{{student.name}} lives in {{student.city}}</p> So now all we need to do is figure out which student's information to show and how to show it. We're going to go back to students.component.html and make a few changes now. Oh, you can delete student.component.html if you want to since we're not using it anymore.
Back in students.component.html we're going to add a click handler on the main div that's repeating for each student. When the user clicks on a student in the list of students we're going to invoke a function called show and pass the current student to that function: (click)="show(student)" You'll want to add that to the <div> that has the *ngFor on it. Down below that <div> we're going to introduce the student component by adding this code:
<app-student *ngIf="selectedStudent" [student]="selectedStudent"></app-student>
Now we'll wire up that click event to set the selectedStudent to whatever student was passed to the function. First we need to add a property called selectedStudent that is of type Student. You should know how to do this by now so I'm not going to show you.
show(student) { this.selectedStudent = student; }
So now we have (sort of) a working app. We can see a list of students and we can click on a student to view his "details" (such as they are). We have two components working together and we have an interface keeping us honest with our Student objects. We've taken an object-oriented approach to creating an Angular 2 application and so far it's going pretty well. We'll look at routing in our application in the next installment, btu that's all for now.
