CODEWITHSUNDEEP
angulartypescriptangular-directive
WasiF
WasiF

Reputation: 28847

How to pass value to directive in angular

Code & Explanation Updated

I want this directive to disable or enable based on boolean value but whatever value (true/false) I sent through isDraggable variable, in both the cases, directive is enabled.

What to improve in this code?

@Directive({
  selector: '[movableObject]'
})
export class MovableDirective extends DraggableDirective {
  @Input() movableObject: boolean;
}

@Component({
  selector: 'app-panel',
  template: `<div [movableObject]="isDraggable"></div>`,
  styleUrls: ['./panel.component.scss'],
})
export class PanelComponent implements OnInit {
  private isDraggable: boolean = true;
}

Upvotes: 3

Views: 1292

Answers (1)

vinayakj
vinayakj

Reputation: 5681

Notice the @Input decorator. It adds metadata to the class that makes the directive's movableObject property available for binding.

@Directive({
  selector: '[movableObject]'
})
export class MovableDirective extends DraggableDirective {
   @Input() movableObject: boolean;
}

@Component({
  selector: 'app-panel',
  template: `<div [movableObject]="isDraggable"></div>`,
  styleUrls: ['./panel.component.scss'],
})
export class PanelComponent implements OnInit {
  private isDraggable: boolean;
}

Upvotes: 2

Related Questions