CODEWITHSUNDEEP
angularangular-directive
Hayk
Hayk

Reputation: 159

Angular - custom directive for preventing default behavior not working

I'm trying to write a directive for preventing the default behavior. Here's the code

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[app-event-blocker]',
})
export class EventBlockerDirective {
  @HostListener('drop', ['$event'])
  @HostListener('dragover', ['$event'])
  public handleEvent(event: Event) {
    event.preventDefault();
  }
}

Then i import it in shared module, declare it, and export

import { NgModule } from '@angular/core';
import { EventBlockerDirective } from './directives/event-blocker.directive';
@NgModule({
  declarations: [
    ModalComponent,
    EventBlockerDirective,
  ],
  imports: [CommonModule],
  exports: [
    EventBlockerDirective,
  ],
})
export class SharedModule {}

And then import it in Video module, where i use it

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../shared/shared.module';

@NgModule({
  declarations: [],
  imports: [CommonModule, SharedModule],
})
export class VideoModule {}

Then i use it in Video component

<div app-event-blocker>
  <h5>Drop your file here (mp4 only!)</h5>
</div>

But when i drop file in the box, it opens it in browser instead of not doing anything. When i add event handlers and prevent default behavior there it works, but i want to do it with directive. I'd appreciate if you could help me understand what is wrong with it. Full code can be found in the github repo

Upvotes: 0

Views: 243

Answers (1)

Eugene
Eugene

Reputation: 1517

Directive that provides attribute app-event-blocker is out of the current Angular module's scope

UploadComponent doesn't belong to VideoModule and declared in AppModule.
So you should import SharedModule in AppModule.

Upvotes: 1

Related Questions