Reusable Component Structure.pptx
- 1. Delete Engine Module Root App Module Car Component CarStore Component Car Warehouse Component Car API Service Car Store API Service Car Warehouse API Service Delete Engine Service Delete Engine Component Delete Engine Component Delete Engine Component • First, we will create a Delete Engine Module • Then we will import it into the Root App Module
- 2. Delete Engine Module Root App Module Car Component CarStore Component Car Warehouse Component Car API Service Car Store API Service Car Warehouse API Service Delete Engine Service Delete Engine Component Delete Engine Component Delete Engine Component • The next step is to create three different classes of API Service a. Car API Service b. Car Store API Service c. Car Warehouse API Service
- 3. Delete Engine Module Root App Module Car Component CarStore Component Car Warehouse Component Car API Service Car Store API Service Car Warehouse API Service Delete Engine Service Delete Engine Component Delete Engine Component Delete Engine Component • Ensure the three API Service classes are extended to the Delete Engine Service class • The Delete Engine Service class serves as the generic API Service provider or wrapper of any API Resource Service class that can be used in any component that needs a deletion of a resource
- 4. Delete Engine Module Root App Module Car Component CarStore Component Car Warehouse Component Car API Service Car Store API Service Car Warehouse API Service Delete Engine Service Delete Engine Component Delete Engine Component Delete Engine Component • The next step is to provide the Delete Engine Service class in the following components a. Car Component b. Car Store Component c. Car Warehouse Component
- 5. Delete Engine Module Root App Module Car Component CarStore Component Car Warehouse Component Car API Service Car Store API Service Car Warehouse API Service Delete Engine Service Delete Engine Component Delete Engine Component Delete Engine Component • We will provide the Car API Service class directly to Car Component. Why? We don't want to expose this Car API Service in other places that do not need this! • Next is to provide the Delete Engine Service class as a "View Provider" of the source component and then use the existing API Service, which is the Car API Service class
- 6. Delete Engine Module Root App Module Car Component CarStore Component Car Warehouse Component Car API Service Car Store API Service Car Warehouse API Service Delete Engine Service Delete Engine Component Delete Engine Component Delete Engine Component • The Delete Engine Service was provided as a "View Provider" because we want to share this service with the child or view component(s) of the source component • The Delete Engine Component uses the Delete Engine Service class to invoke the delete method
- 7. Delete Engine Module Root App Module Car Component CarStore Component Car Warehouse Component Car API Service Car Store API Service Car Warehouse API Service Delete Engine Service Delete Engine Component Delete Engine Component Delete Engine Component • This is the full structure of how we build for flexibility in Angular by using a reusable component