Where should I put interfaces that the components should implement from in Angular-CodePudding

I have the following folder structure. If you look at the backend folder, this folder has users and roles folders. These two are actually Angular modules. I will be adding more Angular modules in the future (activity-logs and branches etc...)

No matter how many modules I add, I have written an interface that every component in each module should implement because that interface contains some common methods that each component in each module should use (these methods are specifically used for pagination, etc.).

I have written the interface, it works fine. But I can not figure out which directory I should put it in. For now I have placed it inside the models directory. Where should I should put such interfaces?

├───backend
│   ├───auth
│   │   └───auth-page
│   │       └───auth-form
│   │           └───auth-form-heading
│   ├───dashboard
│   ├───header
│   ├───roles
│   │   └───create-role
│   ├───shared
│   │   ├───active-status-button
│   │   ├───bg
│   │   ├───create-button
│   │   │   └───create-button-directive
│   │   ├───dual-auth
│   │   │   └───dual-auth-modal
│   │   └───modal
│   ├───sidebar
│   └───users
│       └───create-user
├───frontend
├───helpers
├───models
│   └───backend
│       ├───auth
│       ├───dual-auth
│       ├───header
│       ├───roles
│       │   └───create-role
│       ├───sidebar
│       └───users
│           └───create-user
├───pipes
│   └───backend
│       └───roles
│           └───create-role
├───services
│   └───backend
│       ├───auth
│       ├───roles
│       ├───shared
│       │   └───bg
│       └───users
└───shared
    ├───dropdown
    ├───input-field-error
    └───loading-spinner

I searched for similar questions in Stack Overflow and came across answers in When to use Class or Interface in Angular project? But all of them talk about the implementation of the interface and it is not discussed about where I should put these things.

I feel like they certainly do not belong in the models folder in my case, because in my case they are not representations of something as they have their methods that should be overwritten by my components. So not exactly a model.

CodePudding user response：

It depends if your interface will be implemented in one component or in multiple components. My practice is to place shared interfaces (used by multiple modules) in shared/models folder. if an interface is used by only one component, my practice is to create /models folder inside that component and put all interfaces there