CODEWITHSUNDEEP
angulartypescriptangular2-directives
user1814879
user1814879

Reputation: 984

Call method of a component in directive

I defined a directive iCheck and I want to call a method in a component when I click on radio button ... My directive : directive.ts

declare var jQuery: any;

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

export class IcheckDirective implements AfterViewInit {
  constructor(private el: ElementRef) {
    jQuery(this.el.nativeElement).iCheck({
      checkboxClass: 'icheckbox_square-aero',
      radioClass: 'iradio_square-aero'
    }).on('ifChecked', function(event) {
      if (jQuery('input').attr('type') === 'radio') {
        // I want to call my method "selectType() of my component.ts ();
      }
    })
  }
  ngAfterViewInit(): void {
    return;
  }
}

folder.component.ts

@Component({
  selector: 'app-folders',
  templateUrl: './folders.component.html',
  styleUrls: ['./folders.component.css']
})
export class FoldersComponent implements OnInit {

constructor(
    private route: ActivatedRoute,
    private router: Router)

   selectType(){ ==> Method that I want to call
    alert();
    console.log("Ici");
  }
..}

My html file folder.component.html where I use my directive in a input 

<input type="radio" icheck name="type" [(ngModel)]="type"value="OUT"> OUT

So how can I call method "selectType()" when I click a radio button ?

Upvotes: 3

Views: 5928

Answers (3)

Tornike Choladze
Tornike Choladze

Reputation: 304

you can create EventEmitter in directive and whenever you emit it call components function:

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

export class IcheckDirective implements AfterViewInit {
   @Output('icheck') callComponentFunction: EventEmitter<any> = new EventEmmiter<any>;

jQuery('#radioBtn').change(function (){
            if (jQuery('#radioBtn').attr("checked")) {
                this.callComponentFunction.emit();
            } else {

            }

   ngAfterViewInit(): void {

   }
}

and html: 

<input type="radio" #radioBtn (icheck)="here goes component function you want to call" name="type" [(ngModel)]="type"value="OUT">

if you want just to call function when radio state changes just use jQuery in your component there is no need of directive

HTML: <input type="radio" #radioBtn [(ngModel)]="type"value="OUT">

@Component({
  selector: 'app-folders',
  templateUrl: './folders.component.html',
  styleUrls: ['./folders.component.css']
})
export class FoldersComponent implements OnInit {

 constructor(private route: ActivatedRoute, private router: Router) {}

 jQuery('#radioBtn').change(function (){
        if (jQuery('#radioBtn').attr("checked")) {
            this.selectType()
        } else {

        }
 });


  selectType() { ==> Method that I want to call
    alert();
    console.log("Ici");
  }
}

Upvotes: 2

Max Koretskyi
Max Koretskyi

Reputation: 105563

There are two ways how you can do that:

  1. Inject the parent component instance and call the method directly on it
  2. Define output event for the directive and bind to it from the parent component.

Injecting parent component

export class IcheckDirective implements AfterViewInit {
  constructor(private el: ElementRef, private parentCmp: FoldersComponent) {
    const self = this;

    jQuery(this.el.nativeElement).iCheck({
        ...
    }).on('ifChecked', function(event) {
      if (jQuery('input').attr('type') === 'radio') {

        // I want to call my method "selectType() of my component.ts ();
        this.parentCmp.selectType('value');
      }
    })

Using output event

Define output for the IcheckDirective and then bind to it from the file.component:

export class IcheckDirective implements AfterViewInit {

  @Output() callParentMethod = new EventEmitter();

  constructor(private el: ElementRef) {
    const self = this;

    jQuery(this.el.nativeElement).iCheck({
       ...
    }).on('ifChecked', function(event) {
      if (jQuery('input').attr('type') === 'radio') {

        // I want to call my method "selectType() of my component.ts ();
        self.callParentMethod.next('value');
      }
    })
  }

And then inside the template:

<input type="radio" icheck name="type" (callParentMethod)="selectType($event)"  [(ngModel)]="type"value="OUT"> OUT

Upvotes: 7

basarat
basarat

Reputation: 276393

"selectType()" when I click a radio button

Bind to the click event on the input.

More

Angular docs on the subject : https://angular.io/guide/user-input

Upvotes: 0

Related Questions