We're finally ready to connect the entry list components to our entry service and

display real data from the backend server, let's get going.

You're probably wondering, where does the backend server come in?

We will be using a traditional backend server for this course.

Instead, we'll use a module developed by the angular community

in collaboration with the angular team.

This module is used for testing and

demo purposes, I've included a link to the project in the teacher's notes.

Also in the teacher's notes, you'll find a link to the source for

our fake backend server.

Let's create a new file in our app directory,

call it backend .ts.

Now, copy the contents of the backend server file from the teacher's note and

paste it into the backend ts file.

Then save.

Now, let's go into the terminal and

install the Angular in-memory-web-api package.

npm install angular-in-memory-web-api

and we'll use the --save flag to indicate that this package

is an application run time dependency, not a development tooling dependency.

Be sure to append the at sign With 0.2.4,

With the --save-exact flag to install the correct version for this course.

Because our back-end services used in the required method to import photos

We'll need the appropriate web pack loader installed.

Let's install the file loader-package.

This time, we'll use the save-dev flag since this

package is related to the build of our application.

Next we need to import the in memory package in the vendor.ts file.

This is to ensure that the packages source code and

our source code doesn't get bundled together.

Then, we need to configure angular to use the angular in memory web API package.

Open the app.module.ts file and at the top,

let's import the in memory web API module.

This module has a static method that connects our InMemory service

with the angular http service.

Now, we need to import the InMemoryEntryService

from our backend TS file we created.

In the imports array we'll add a new line and

add the in memory webapi module and call the forRoot method and

pass in our in memory entry service.

This is the service we just imported.

The Imports array is where all additional angular modules are referenced.

Adding these modules to the import's array registers their components and

services for use within our application.

It's important to note that the imports array in NG module is only for

Angular modules and not for JavaScript modules.

An example of a JavaScript module might be the load-library.

there's no need to import that type of module here

since it's not an Angular module.

In-memory web API module is now configured to

intercept requests met with the HTTP service.

It's important to know you would be using the In memory web API module in avail

application, it should only be use for educational proposes like this cause.

Now that we have our backend server wire up,

let's connect the entry service to the entry list component we'll

start by inputting the EntryService at the top of the file.

Next we want to add a reference to the service in the constructor's

parameters list.

We won't be using the entry service in the constructor So

we'll need to add the private key word.

By adding the private or public keywords to the injected service, it gets added to

the prototype so that the service is available other methods on the component.

Even though we could use the entry service in the constructor

is best to put initialization scripts in the NG on it method.

Angular has a number of Lifecycle Hooks Which can be applied to a component.

The ngOnInit method is one that Angular calls when a component is

being initialized.

There's also the ngOnDestroy method

that gets called when the component is destroyed.

You can learn more about these and other lifecycle hooks in the teacher's notes.

A benefit of working with TypeScript Is that we can define interfaces and

apply them to classes where we want to enforce some rules.

When developing large applications in a team, its important to put checks and

balances in place so our code doesn't break no matter who's working on it.

Interfaces provide these checks and balances.

Let's go ahead and imput the OnInit interface from angular code.

We'll tell our Entry List Component that we'd like to implement the OnInit

interface by adding the implements key word follow by OnInit.

Adding the interface will result with typescript giving an error.

By hovering our mouse over the entry list component class name,

we can see that the checks and balances are in action.

We have to implement the ngOnIt method.

We're going to set up an entry's array so

we can display the list of photo entries from the back end server.

Add a new property to our component called entries and

give it the type definition of an array of entries.

We haven't imported the entry model yet so let's do that now.

We already have access to the entry service,

thanks to dependency injection .let's put it to work.

In the ngomit method, we'll call the get entries method

Then we can set our components entries property to be the value returned.

All instance members of a class, that is all members that aren't static,

can be accessed through the 'this' symbol.

In our HTML template we'll need to loop through the entries

like we did with the comments that we did earlier on in the course.

Open up the entry list dot HTML file and let's modify the app entry.

Let's add the NgFor directive and loop over our entries.

We'll also need to pass the entry data into the entry component.

We can do that by adding on-way data binding by passing the entry from the loop

into our entry component.

On the left-hand side of the equal sign,

Put square brackets to indicate that it's a property on the entry component.

On the right inside of the equal sign is the data.

In this case, the name if the property

on the left is the same as the associated variable from the loop.

Now we need to update our entry component to receive this new data and

remove the placeholder data.

Open the entrycomponent.ts file and add a new property entry.

The entry property is how the data is shared between the two components.

Just like what we did with the entry list component, let's import the entry model.

Now we can assign the entry type to the entry property.

We now need to update our template to reference the entry property.

Open up the entry component dot html file and prefix all properties with our entry.

We'll change the title to entry dot title, the photo to entry dot photo.

Description becomes Entry.description.

Comments become entry.comments

And be sure to change comments in both places, okay.

So our entry component has all the right pieces in place but

it still doesn't know how to treat the data from the entry's component.

If we take a quick look in the browser we'll see that the compiler is

thrown in an error.

Count binder entry Since it is isn't a known property on up entry.

Like most errors we've seen so

far, this means we haven't configured something quite correctly.

We need to apply an input decorator to our entry property so

it can receive data from the entry list.

In the entry.component.ts file,

we'll need to import the input decorator from the Angular's call package.

Just before the entry property we called the input decorator.

Don't forget the x sign.

Save all the files and head over to the browser.

The browser console shows no errors and we have photos

and we can even toggle comments on and off by clicking the button.

Cool, well done.

You've learned a lot about angular in this stage.

Keep up the good work.

In the next stage, we'll build out a common form so

our visitors can tell us how much they love our photos.