Now let’s add our component to the page by using the selector that is defined in the contacts.component.ts as app-contacts to add a tag to our app.component.html.

Updated app.component.html

<h1>
{{title}}
<app-contacts></app-contacts>
</h1>

It’s not much but if you run ng serve --open you should see the following:

App with contacts Component

Add A Service

Now we are going to need a service so we have one location to call the @RemoteActions from so let’s make that now.

Create remote-actions Service

ng generate service services/remote-actions

For the name we included the name of the folder where we want the service to be created.

services/remote-actions Created

installing service
create src\app\services\remote-actions.service.spec.ts
create src\app\services\remote-actions.service.ts
WARNING Service is generated but not provided, it must be provided to be used

And you should now have a folder names services in you src-ng/src/app with the following files:

remote-actions.service.ts

remote-actions.service.spec.ts

Let’s take a look at these:

remote-actions.service.ts

This is the actual service. We will put logic we want to be shared or it not specific to a single component.

Import Statement

Providers

providers: [
RemoteActionsService
],

Now we will inject the service to the contacts.component.ts with the same inject statement as we used on the app.module.ts. We will also pass the RemoteActionsService into the constructor as private with a property name of remoteActions. We also add a property of message with a type of string. The updated class should look like this:

We will also need to update contacts.component.html to use the new message value:

Updated contacts.component.html

<p>
{{message}}
</p>

Save it and now you should see your app reload and see the message from the service.

Message from Service!

Side Note: Zone.js Error

I noticed I was getting an error with Zone.js to fix this I installed version 0.8.5 zone.js@0.8.5. If you don’t see an error with Zone.js feel free to skip this.

Fix zone.js Error

npm install zone.js@0.8.5

Conclusion

We now have a component and a service in our Angular App. Next time we will call one of our remote actions. Do you have any questions so far? Let me know by leaving a comment below or emailing brett@wipdeveloper.com.