Connecting Angular services with application components

Now, we will connect all of the Angular services and templates that we have created during this book. For this, we will create the logic and the functions that we will use inside our components.

Before we begin, let's set the endpoint of our API as a variable in the Angular environment file.

Adding environment configuration

As the name says, this file is used to set up environment variables in our application. The best part about it is that Angular comes with a dev and prod environment that's configured by default and is very simple to use. We can also set a variety of variables.

In this example, we are setting the backend URL using the development file.

Open the ./Client/src/environments/environment.ts file and add the following URL:

     export  const  environment  = {
                production: false,
                apiUrl: 'http://localhost:8081/api'
        };

As you can see, we have another file called environment.prod.ts inside the...