> For the complete documentation index, see [llms.txt](https://enappd-apps.gitbook.io/apps/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://enappd-apps.gitbook.io/apps/ionic-4-full-app/how-to-use-this-template/shared-component-and-modules.md).
# 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
```
```
Read more about routing in Angular in [official documentation here](https://angular.io/guide/routing-overview).
## 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 `` etc.
##