Show yyour data with an HTML layout.
- [Instructor] Now that the bare bones of our component is working, let's do something more functional with it, like display our data. But, we don't have any data yet. That's fine, we can create some placeholder data which we will eventually replace with data from our backend web API. Let's go to our component class and create an empty list. We'll call the list "messages". And we'll initialize that to an empty list. If at this point you are getting an error or warning in the editor specifying an implicit type, you can either fix that by specifying the type, which would be a string array, or go over to tsconfig.json and set noImplicitAny to false.
If you're still getting an error after changing it, Visual Studio Code might just need some time to refresh, or we can force it with a save. As you can see, we're no longer getting the error. I prefer disabling noImplicitAny since I like my code to contain mostly behaviors, some structure, but not much safety, since I think the developer should be responsible for that. Especially when it comes to prototyping an application, but that is just a personal preference.
Let's continue by populating our list with a few objects. We will assume each message will have a text, and an owner. So I'll put in some random text, and set an owner name. Let's add one more message. Now we can display this in our template. Using double curly braces in our template, we can show the length of our message list.
As we can see, it's displaying two. Next, let's try to display the text from one of our message objects. Since it's an array, I'll access the first element and I'll access the text property. As we can see, it's appending the correct text. We now know how to display individual messages in our list. But what if we wanted to display all of them? We would use a directive called ngFor which you probably guessed is a for-loop.
This will loop through all of the elements in our list. Let's try that out. We will need to put this inside a div in our template so that Angular knows to repeat everything inside this div for each item in the list. ngFor uses the let syntax, so I'll use "let message of messages" and I'll use the curly braces again to access the message.txt.
Let's also add a field to show who the message is by. Once we hit save, we can see both messages in our list show as expected. Next, let's make things look a little bit better with the styles library called Angular Material.
- Setting up the infrastructure
- Displaying data in Angular 2
- Refining your layout with Angular Material
- Getting your data from Node.js
- Saving data to a list
- Creating the component
- Getting your input data
- Creating reactive forms in Angular
- Creating a security middleware
Skill Level Intermediate
Angular 2 Essential Trainingwith Justin Schwartzenberger2h 45m Intermediate
Building a Website with Node.js and Express.jswith Ray Villalobos3h 16m Intermediate
1. Setting Up the Infrastructure
2. Displaying Data in Angular 2
3. Getting Your Data from Node
4. Saving Your Data to Node
5. Creating a Form in Angular
6. Navigating with Router
7. Reactive Programming
8. Creating Reactive Forms in Angular
9. Registering Users
10. Logging In
Create the login services6m 47s
11. Authorizing Resources
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.