Dynamic configurations using Value providers

In this recipe, you'll learn how to use value providers in Angular to provide constants and config values to your app. We'll start with the same example from the previous recipe, that is with the EmployeeComponent and AdminComponent using the BucketComponent to manage bucket of fruits. We will restrict the EmployeeComponent from deleting items from the bucket by using the configuration using value provider. As a result. the employees won't even see the Delete button.

Getting ready

The app that we are going to work with resides in start/apps/chapter03/ng-aliased-class-providers inside the cloned repository:

1. Open the code repository in your Code Editor.
2. Open the terminal, navigate to the code repository directory and run npm run serve ng-aliased-class-providers to serve the project

This should open the app in a new browser tab and you should see the app as shown in Figure 3.11

1. Click on the Login as Admin button. You should...