CODEWITHSUNDEEP
angular
RRB
RRB

Reputation: 2116

Reuse an Angular component

I am trying to reuse an Angular component given the following tree structure

enter image description here

The component I require is called existing-savings which lives in transfer-guide. I would like to use existing-savings in retirement-contributions-information

How would I go about this?

Currently I get this error compiler.js:1021 Uncaught Error: Template parse errors: 'app-existing-savings' is not a known element: 1. If 'app-existing-savings' is an Angular component, then verify that it is part of this module.

Upvotes: 0

Views: 465

Answers (3)

JuNe
JuNe

Reputation: 1997

For reuseable components I always create a shared module where these components get added. Then you can import that module anywhere you want. If you have a lot of reuseable components you should think about to group them to multiple 'shared' modules, which you can import anywhere.

Upvotes: 0

KevinTale
KevinTale

Reputation: 1898

In this situation, you are realizing existings-savings is a common feature/component, in other words you need it in more than one places. Whenever this situation happens, it means you should move your common feature into an upper level and make it a module on its own.

I suggest you create a new module called existings-savings where only a single component will live (this pattern is called SCAM for Single Component Angular Module) and place it within your shared folder I believe (or any folder that you put things that are shareable). Then, you will inject the ExistingsSavingsModule in your RetirementContributionsInformationModule, it will allows you to use existings-savings component.

Also, don't forget to export existings-savings component in exportsarray in your ExistingsSavingsModule like so :


@NgModule({
    exports: [ExistingsSavingsComponent],
    declarations: [ExistingsSavingsComponent]
})
export class ExistingsSavingsModule{}

Upvotes: 3

Jayson
Jayson

Reputation: 167

I think you can import the transfer guide module into the benefits module. By doing that you can re-use not only the mentioned component, but also the other component which lives in transfer guide module. I suggest creating smaller modules to make it lightweight.

Upvotes: 0

Related Questions