Setting a custom attribute directive in Angular2

Question

I am trying to set a costume attribute directive to an input but I couldn't find the way to do it.

My directive is the following

@Directive({
    selector: '[disable-paste]'
})
export class DisablePaste {
    constructor(private _elementRef:ElementRef) {
        this._elementRef.nativeElement.onpaste = (e:any) => {
            e.preventDefault();
        }
    }
}

If I just put the directive by its own in the input, it works. But when I try to use it "conditionally" it doesn't. I tried all these:

<input [disable-paste]="doNotAllowPaste" ... />
<input disable-paste="doNotAllowPaste" ... />
<input [attr.disable-paste]="doNotAllowPaste" ... />

Mark Rajcok · Accepted Answer · 2016-03-28 21:53:53Z

3

I think you need an input property in order to conditionally execute your logic, whenever the input property value changes:

@Directive({
  selector: '[disable-paste]'
})
export class DisablePaste {
  @Input('disable-paste') disablePaste:boolean;

  constructor(private _elementRef:ElementRef) {}
  ngOnChanges() {
    if(this.disablePaste) {
      this._elementRef.nativeElement.onpaste = (e:any) => {
         e.preventDefault();
      }
    } else {
      this._elementRef.nativeElement.onpaste = null; 
    }
  }
}

answered Mar 28, 2016 at 21:53

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thierry Templier · Accepted Answer · 2016-03-28 18:48:42Z

1

You coulsd try this:

@Directive({
  selector: '[disable-paste]'
})
export class DisablePaste {
  @Input('disable-paste')
  disablePaste:any;

  constructor(private _elementRef:ElementRef) {
    this._elementRef.nativeElement.onpaste = (e:any) => {
        e.preventDefault();
    }
  }
}

If you use [...], you will get an object corresponding to the evaluation of the specified expression. Without them, a string value.

answered Mar 28, 2016 at 18:48

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

2 Comments

Hernan Pintos Over a year ago

This is a good alternative, but I wanted to know if there was a way of conditionally render that directive without having to add an input to it.

Thierry Templier Over a year ago

Just a silly question: why don't apply the directive if you don't have the behavior. The directive contains several things. Just try to understand better your issue ;-) Angular2 commonly mixes another attribute to disable it. For example: selector: 'form:not([ngNoForm]):not([ngFormModel]),ngForm,[ngForm]'. See github.com/angular/angular/blob/master/modules/angular2/src/….

Collectives™ on Stack Overflow

Setting a custom attribute directive in Angular2

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related