Reputation: 984
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
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
Reputation: 105563
There are two ways how you can do that:
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');
}
})
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
Reputation: 276393
"selectType()" when I click a radio button
Bind to the click
event on the input.
Angular docs on the subject : https://angular.io/guide/user-input
Upvotes: 0