Angular 2 can't use custom directive

Question

This is the shared module which I share across my app:

@NgModule({
  imports: [
    CommonModule,
    ModalModule
  ],
  declarations: [],
  exports: [
    ModalModule
  ]
})

export class SharedModule {}

This shared module imports ModalModule:

import {ModalCloseDirective, ModalOpenDirective, ModalApiService, ModalCloseComponent} from './shared';
import {ModalComponent} from './modal.component';

@NgModule({
  declarations: [
    ModalCloseDirective,
    ModalOpenDirective,
    ModalComponent,
    ModalCloseComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    ModalCloseDirective,
    ModalOpenDirective,
    ModalComponent,
    ModalCloseComponent
  ],
  providers: [
    ModalApiService
  ]
})

export class ModalModule {}

Then I have a third module, which imports SharedModule (which exports the ModalModule):

import {SharedModule} from '../../shared';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    RouterModule.forChild([
      {
        path: 'documentation',
        component: DocumentationComponent,
        children: [
          {
            path: '',
            component: DocumentationListComponent
          }
        ]
      }
    ]),
    SharedModule
  ],
  declarations: [
    DocumentationListComponent
  ],
  exports: [
    RouterModule
  ]
})
export class documentationModule {}

And then I have this directive modalOpen:

@Directive({
  selector: '[modalOpen]'
})

export class ModalOpenDirective {

  modalOpen: string;

  constructor(private modalApi: ModalApiService) {}

  @HostListener('click')
  open(): void {
    this.modalApi.open(this.modalOpen);
  }
}

But when I use it inside of DocumentationListComponent's template:

<span [(modalOpen)]="new-item">Add item</span>

I get this:

Can't bind to 'modalOpen' since it isn't a known property of 'span'

Why can't it find the directive in my template?

EDIT: What I want is basically a feature module from this guide: https://angular.io/docs/ts/latest/guide/ngmodule.html

I believe you want to use ModalOpenDirective throughout your application. right? — micronyks, Oct 16 '16 at 14:36
@micronyks Yes, I've got a whole lot of directives that needs to be shared like this. — Chrillewoodz, Oct 16 '16 at 14:36
Then why are you declaring it within ModalModule ? declare it within sharedmodule only. — micronyks, Oct 16 '16 at 14:38
@micronyks Because I want to group functionality and then export only `ModalModule` to the `SharedModule`. Declaring it right inside `SharedModule` doesn't work either because that's the way I had it at first, something is wrong somewhere but I can't figure out what it is. — Chrillewoodz, Oct 16 '16 at 14:40
@micronyks I believe it's called a **feature** module: https://angular.io/docs/ts/latest/guide/ngmodule.html — Chrillewoodz, Oct 16 '16 at 14:47
@peeskillet Nope, but that comment/answer just made me realise what's happening. Every time I used `[]` or `[()]` it treated it as a native attribute of the span instead of the directive. I can't use it like that so I just added an extra input of the directive and it works the way it should. Sometimes you shouldn't try to take shortcuts like this hehe. — Chrillewoodz, Oct 16 '16 at 15:00

score 0 · Answer 1 · answered Oct 16 '16 at 15:03

0

I just realised why it isn't working, so I'll leave an explanation here in case other people get stuck on this as well. Basically when you use [modalOpen] or [(modalOpen)] it throws an error, because if you use those it will think that the span element has modalOpen as an attribute, which it doesn't.

So instead I added an @Input() modalId to the modalOpen directive and pass the id like this instead:

<span modalOpen modalId="new-item">Add item</span>

and it works.

Kudos to @peeskillet for making me realise this.

answered Oct 16 '16 at 15:03

Chrillewoodz

27,055
21
92
175

1

You could also add a input like this in the modal open directive, @Input() modalOpen; @Output('modalOpen') onModalOpen: EventEmitter. And then you can pass the data with [(modalOpen)]="data" – Nicu Oct 17 '16 at 05:53
@Nicu Thanks, I'll try that. – Chrillewoodz Oct 17 '16 at 06:02

Angular 2 can't use custom directive

1 Answers1