Connecting a Service and Component

We're finally ready to connect the entry list components to our entry service and 0:00 display real data from the backend server, let's get going. 0:04 You're probably wondering, where does the backend server come in? 0:08 We will be using a traditional backend server for this course. 0:11 Instead, we'll use a module developed by the angular community 0:15 in collaboration with the angular team. 0:20 This module is used for testing and 0:23 demo purposes, I've included a link to the project in the teacher's notes. 0:25 Also in the teacher's notes, you'll find a link to the source for 0:29 our fake backend server. 0:32 Let's create a new file in our app directory, 0:34 call it backend .ts. 0:39 Now, copy the contents of the backend server file from the teacher's note and 0:44 paste it into the backend ts file. 0:49 Then save. 0:54 Now, let's go into the terminal and 0:57 install the Angular in-memory-web-api package. 0:59 npm install angular-in-memory-web-api 1:03 and we'll use the --save flag to indicate that this package 1:12 is an application run time dependency, not a development tooling dependency. 1:21 Be sure to append the at sign With 0.2.4, 1:26 With the --save-exact flag to install the correct version for this course. 1:35 Because our back-end services used in the required method to import photos 1:40 We'll need the appropriate web pack loader installed. 1:44 Let's install the file loader-package. 1:47 This time, we'll use the save-dev flag since this 1:54 package is related to the build of our application. 1:59 Next we need to import the in memory package in the vendor.ts file. 2:15 This is to ensure that the packages source code and 2:20 our source code doesn't get bundled together. 2:23 Then, we need to configure angular to use the angular in memory web API package. 2:26 Open the app.module.ts file and at the top, 2:32 let's import the in memory web API module. 2:36 This module has a static method that connects our InMemory service 2:54 with the angular http service. 2:58 Now, we need to import the InMemoryEntryService 3:03 from our backend TS file we created. 3:10 In the imports array we'll add a new line and 3:27 add the in memory webapi module and call the forRoot method and 3:32 pass in our in memory entry service. 3:38 This is the service we just imported. 3:44 The Imports array is where all additional angular modules are referenced. 3:47 Adding these modules to the import's array registers their components and 3:51 services for use within our application. 3:56 It's important to note that the imports array in NG module is only for 3:59 Angular modules and not for JavaScript modules. 4:03 An example of a JavaScript module might be the load-library. 4:06 there's no need to import that type of module here 4:10 since it's not an Angular module. 4:13 In-memory web API module is now configured to 4:15 intercept requests met with the HTTP service. 4:18 It's important to know you would be using the In memory web API module in avail 4:22 application, it should only be use for educational proposes like this cause. 4:27 Now that we have our backend server wire up, 4:32 let's connect the entry service to the entry list component we'll 4:35 start by inputting the EntryService at the top of the file. 4:40 Next we want to add a reference to the service in the constructor's 5:00 parameters list. 5:05 We won't be using the entry service in the constructor So 5:14 we'll need to add the private key word. 5:18 By adding the private or public keywords to the injected service, it gets added to 5:23 the prototype so that the service is available other methods on the component. 5:28 Even though we could use the entry service in the constructor 5:33 is best to put initialization scripts in the NG on it method. 5:37 Angular has a number of Lifecycle Hooks Which can be applied to a component. 5:42 The ngOnInit method is one that Angular calls when a component is 5:46 being initialized. 5:51 There's also the ngOnDestroy method 5:53 that gets called when the component is destroyed. 5:56 You can learn more about these and other lifecycle hooks in the teacher's notes. 5:59 A benefit of working with TypeScript Is that we can define interfaces and 6:03 apply them to classes where we want to enforce some rules. 6:09 When developing large applications in a team, its important to put checks and 6:13 balances in place so our code doesn't break no matter who's working on it. 6:18 Interfaces provide these checks and balances. 6:22 Let's go ahead and imput the OnInit interface from angular code. 6:25 We'll tell our Entry List Component that we'd like to implement the OnInit 6:31 interface by adding the implements key word follow by OnInit. 6:36 Adding the interface will result with typescript giving an error. 6:43 By hovering our mouse over the entry list component class name, 6:47 we can see that the checks and balances are in action. 6:52 We have to implement the ngOnIt method. 6:55 We're going to set up an entry's array so 7:03 we can display the list of photo entries from the back end server. 7:06 Add a new property to our component called entries and 7:18 give it the type definition of an array of entries. 7:22 We haven't imported the entry model yet so let's do that now. 7:25 We already have access to the entry service, 7:38 thanks to dependency injection .let's put it to work. 7:40 In the ngomit method, we'll call the get entries method 7:47 Then we can set our components entries property to be the value returned. 7:57 All instance members of a class, that is all members that aren't static, 8:06 can be accessed through the 'this' symbol. 8:11 In our HTML template we'll need to loop through the entries 8:14 like we did with the comments that we did earlier on in the course. 8:19 Open up the entry list dot HTML file and let's modify the app entry. 8:22 Let's add the NgFor directive and loop over our entries. 8:29 We'll also need to pass the entry data into the entry component. 8:35 We can do that by adding on-way data binding by passing the entry from the loop 8:40 into our entry component. 8:44 On the left-hand side of the equal sign, 8:46 Put square brackets to indicate that it's a property on the entry component. 8:51 On the right inside of the equal sign is the data. 8:56 In this case, the name if the property 8:59 on the left is the same as the associated variable from the loop. 9:01 Now we need to update our entry component to receive this new data and 9:07 remove the placeholder data. 9:11 Open the entrycomponent.ts file and add a new property entry. 9:13 The entry property is how the data is shared between the two components. 9:20 Just like what we did with the entry list component, let's import the entry model. 9:25 Now we can assign the entry type to the entry property. 9:41 We now need to update our template to reference the entry property. 9:48 Open up the entry component dot html file and prefix all properties with our entry. 9:53 We'll change the title to entry dot title, the photo to entry dot photo. 10:02 Description becomes Entry.description. 10:08 Comments become entry.comments 10:18 And be sure to change comments in both places, okay. 10:37 So our entry component has all the right pieces in place but 10:43 it still doesn't know how to treat the data from the entry's component. 10:48 If we take a quick look in the browser we'll see that the compiler is 10:53 thrown in an error. 10:56 Count binder entry Since it is isn't a known property on up entry. 10:58 Like most errors we've seen so 11:04 far, this means we haven't configured something quite correctly. 11:05 We need to apply an input decorator to our entry property so 11:09 it can receive data from the entry list. 11:14 In the entry.component.ts file, 11:17 we'll need to import the input decorator from the Angular's call package. 11:19 Just before the entry property we called the input decorator. 11:26 Don't forget the x sign. 11:31 Save all the files and head over to the browser. 11:33 The browser console shows no errors and we have photos 11:36 and we can even toggle comments on and off by clicking the button. 11:43 Cool, well done. 11:47 You've learned a lot about angular in this stage. 11:50 Keep up the good work. 11:53 In the next stage, we'll build out a common form so 11:54 our visitors can tell us how much they love our photos. 11:56