Suggest an edit

Improve this article

Refine the answer for “How do you make a directive shared?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## Steps to make a directive shared

1. **Create a SharedModule**
  - Create a module that will hold shared components, directives and pipes.

```typescript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HighlightDirective } from './highlight.directive';

@NgModule({
  declarations: [HighlightDirective],
  imports: [CommonModule],
  exports: [HighlightDirective]  // make the directive available to other modules
})
export class SharedModule {}
```

2. **Add the directive to** `declarations`
  - All directives you want to use must be declared in the module's `declarations`.
3. **Export the directive via** `exports`
  - This makes it available to other modules that import `SharedModule`.
4. **Import SharedModule into the modules that need it**

```typescript
import { SharedModule } from './shared/shared.module';

@NgModule({
  imports: [SharedModule]
})
export class FeatureModule {}
```

> Conclusion: a shared directive is stored in a module that **exports it**, and becomes available to all modules that import that shared module.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts149 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.