CODEWITHSUNDEEP
angularng2-dragula
BradleyDotNET
BradleyDotNET

Reputation: 61349

What is the correct replacement for the @Component metadata directives array?

In many examples on the web I see code with a directives array in the @Component metadata ie:

@Component({
  selector: 'sprint-tasks',
  inputs: ['sprintTask'],
  templateUrl: './views/sprint-tasks.html',
  directives: [Dragula],
  providers: [SprintTaskService],
  viewProviders: [DragulaService]
})

From: How to install a component wrapper for Angular2 (Dragula in particular)

In the 1.0 release of Angular2, this array was removed from the metadata:(https://angular.io/docs/ts/latest/api/core/index/Component-decorator.html)

When trying to use a 3rd party directive (dragula in this case) I get the following error that I assume was previously handled by the directives array:

Can't bind to 'dragula' since it isn't a known property of 'div'

So, where am I supposed to inject Dragula/DragulaDirective (the current release doesn't actually seem to export Dragula) so the parser can find this custom directive? I have imported DragulaModule into the app module as instructed by the Github readme(https://github.com/valor-software/ng2-dragula#setup) and DragulaService is a view provider on the app component.

Upvotes: 2

Views: 591

Answers (2)

Paul Samsotha
Paul Samsotha

Reputation: 208984

When importing the dragula module into the app module, that makes the directives only available to components declared in the app module. If the component you want to use the directive on is declared in a different module, then that module also needs to import the dragula module 

@NgModule({
  imports: [ DragularModule ]
  declarations: [ ComponentUsingDragula ],
  exports: [ ComponentUsingDragula ]
})
class SomeFeatureModule {}

Upvotes: 2

Manish
Manish

Reputation: 2180

import { DragulaModule } from 'ng2-dragula/ng2-dragula';

@NgModule({
  imports: [
    BrowserModule,
    DragulaModule
  ],
  declarations: [
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

It will start working after that, no need to add it in component.

Upvotes: 1

Related Questions