The Angular module is represented as orange box. This module acts as a container for organizing related components, services, and other resources. It serves as a cohesive unit within our application.​​ In our application, we have a powerful Root (Bootstrap) component represented by an orange box, which serves as a versatile container. It provides structured layout and styling to enhance the visual presentation of our content.​ The service providers, depicted as yellow boxes, play a crucial role in offering important functionalities that can be accessed and utilized by multiple components within our application.​ By sharing these service providers through the Root component using view providers, we ensure consistent and efficient data management and communication. The child components of the Root can easily access and interact with these shared services, eliminating the need for redundant code or unnecessary data duplication.​ ​Now that we've designated these services as view providers for the Root component, the child components will have access to them.​ Please note that the view providers can be assigned to any component other than the Root component. We assign them to the component's view to enable the sharing of the same service instances with the child components.​ User Info Service: This service is responsible for displaying user information such as first name, last name, and birthdate.​ User Contact Service: This service handles the management and display of user contacts.​ User Document Service: This service manages and displays user documents or valid IDs.​ Now, let's shift our focus to the four child components nested within the Root component. Each of these child components has a specific role and contributes to different functionalities within our application.​ User Info Card Component: This component provides a quick view of the user. It utilizes three service providers to display the user's name, birthday, and the number of contacts and documents they have.​ User Document Component: This component utilizes the User Document Service to update only the list of documents or valid IDs associated with the user.​ User Document View Component: This component utilizes the User Document Service to retrieve only the list of documents or valid IDs associated with the user.​ ​User Contact Component: This component utilizes the User Contact Service to update only the list of contacts associated with the user.​ User Contact View Component: This component uses the User Contact Service to retrieve only the list of available contacts for the user.​ ​User Info Component: This component provides a comprehensive view of the user's information, contacts, and documents. It primarily utilizes the User Info Service to display the user's first name, last name, and birthday. Additionally, it contains child components responsible for rendering the complete view of the user's documents and contacts.​

1. Module
Root Component
User Info Card Component
User Info
Component
User Document
Component
User Contact
Component
User Document View
Component
User Contact View Component
The Angular module is represented as orange box. This
module acts as a container for organizing related
components, services, and other resources. It serves
as a cohesive unit within our application.​

2. User Contact Service
User Document Service
User Info Service
Root Component
• In our application, we have a powerful Root
(Bootstrap) component represented by an orange
box, which serves as a versatile container. It
provides structured layout and styling to enhance
the visual presentation of our content.
• The service providers, depicted as yellow boxes,
play a crucial role in offering important
functionalities that can be accessed and utilized by
multiple components within our application.
• By sharing these service providers through the
Root component using view providers, we ensure
consistent and efficient data management and
communication. The child components of the Root
can easily access and interact with these shared
services, eliminating the need for redundant code
or unnecessary data duplication.

3. User Contact Service
User Document Service
User Info Service
Root Component
User
Info Card Component
User Info
Component
User Document
Component
User Contact
Component
• Now that we've designated these services as
view providers for the Root component, the
child components will have access to them.
• Please note that the view providers can be
assigned to any component other than the
Root component. We assign them to the
component's view to enable the sharing of the
same service instances with the child
components.

4. User Contact Service
User Document Service
User Info Service
Root Component
• User Info Service: This service is responsible for
displaying user information such as first name, last
name, and birthdate.
• User Contact Service: This service handles the
management and display of user contacts.
• User Document Service: This service manages and
displays user documents or valid IDs.

5. User Contact Service
User Document Service
User Info Service
Root Component
User
Info Card Component
User Info
Component
User Document
Component
User Contact
Component
• Now, let's shift our focus to the four child
components nested within the Root
component. Each of these child components
has a specific role and contributes to different
functionalities within our application.
• User Info Card Component: This component
provides a quick view of the user. It utilizes
three service providers to display the user's
name, birthday, and the number of contacts
and documents they have.

6. • User Document Component: This component
utilizes the User Document Service to update
only the list of documents or valid IDs
associated with the user.
• User Document View Component:
This component utilizes the User
Document Service to retrieve only the list
of documents or valid IDs associated with
the user.
User Contact Service
User Document Service
User Info Service
Root Component
User
Info Card Component
User Info
Component
User Document
Component
User Contact
Component
User Document View
Component

7. • User Contact Component: This component
utilizes the User Contact Service to update only
the list of contacts associated with the user.
• User Contact View Component:
This component uses the User Contact
Service to retrieve only the list of available
contacts for the user.
User Contact Service
User Document Service
User Info Service
Root Component
User
Info Card Component
User Info
Component
User Document
Component
User Contact
Component
User Contact View
Component

8. • User Info Component: This component
provides a comprehensive view of the
user's information, contacts, and
documents. It primarily utilizes the User
Info Service to display the user's first name,
last name, and birthday. Additionally, it
contains child components responsible for
rendering the complete view of the user's
documents and contacts.
• User Document View Component: This
component utilizes the User Document
Service to retrieve only the list of
documents or valid IDs associated with the
user.
• User Contact View Component: This
component uses the User Contact Service
to retrieve only the list of available contacts
for the user.
User Contact Service
User
Document Service
User Info Service
Root Component
User
Info Card Component
User Info
Component
User Document
Component
User Contact
Component
User Contact View
Component
User Document View
Component

9. • Finally, here is the complete structure of
our application. Notice how we have
shared the three service providers
through the Root component, allowing
the components to operate
independently with their respective
functionalities and behaviors.
• Additionally, we have leveraged code
reuse by implementing functionalities
such as the list view of user documents
and contacts.
User Contact Service
User
Document Service
User Info Service
Root Component
User
Info Card Component
User Info
Component
User Document
Component
User Contact
Component
User Contact View
Component
User Document View
Component