Shared Component & Modules

Handling the sharing of common code

Shared Modules

In some cases, the pages use Shared modules. For example, the Instagram Home page and Profile page contains the component instagram which is the scrollable images gallery, imported from src/app/components using shared-module.module.ts . This type of sharing is useful where the same component is required in multiple pages.

If you want to use any of these common components outside of the copied module, just move the shared-module.module.ts to a parent directory level, and then share the component via it.

Imported components look like an HTML tag, something like this

<instagram></instagram>

Read more about routing in Angular in official documentation here.

Shared Components

To modularize and make code in smaller pieces, some code pieces are put as components. These components make it easy to separate small feature development, and handle each individually.

For example, the layout-components -> card-sliders-layout -> components has 5 components which are further used in sliders page in the same module. Since the components are used only in one page, there is no need of a shared module. The component can just be imported in the module.ts file of the page, and then can be used in the page HTML as <app-slider1></app-slider1> etc.