Adding Components, Pipes and Services to a Module

Let's start by defining a new component that we are going to use to show credit card information.

credit-card.component.ts

This component is relying on the to get the credit card number, and on the pipe creditCardMask to mask the number except the last 4 digits that are going to be visible.

credit-card.service.ts

With everything in place, we can now use the CreditCardComponent in our root component.

app.component.ts

Of course, to be able to use this new component, pipe and service, we need to update our module, otherwise Angular is not going to be able to compile our application.

app.module.ts

View Example

Be aware that this method of defining a service in the providers property should only be used in the root module. Doing this in a feature module is going to cause unintended consequences when working with lazy loaded modules.

In the next section, we are going to see how to safely define services in feature modules.