Use injected dependency in jQuery event listener in angular

Question

I'm using Bootstrap 4 modals in Angular 6 and I want to redirect the user to another route once the modal is closed. However, I'm getting a scoping issue when the modal is closed telling me that my injected router is undefined.

My code:

import { Component, OnInit } from '@angular/core';

declare var $: any


@Component({
    selector: 'app-modal',
    templateUrl: './modal.component.html',
    styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit {
    constructor(
        public router: Router
    ) {}

    ngOnInit() {}

    ngAfterViewInit() {
        $('#mymodal').on('hidden.bs.modal', function (e) {
            router.navigate(['/']) //tells me that router is undefined
        })
    }
}

It is generally a bad practice to use jQuery with Angular framework. Instead of using Bootstrap+jQuery, I would suggest you try ng-bootstrap or ngx-bootstrap which are built for Angular and do not depend on jQuery. — treecon
– treecon, Commented Sep 16, 2018 at 18:20

Shashikant Devani · Accepted Answer · 2018-09-16 18:33:03Z

1

Use this keyword like that in Jquery.

ngAfterViewInit() {
var self = this;
    $('#mymodal').on('hidden.bs.modal', function (e) {
        self.router.navigate(['/']);
    })
}

answered Sep 16, 2018 at 18:33

Shashikant Devani

2,4641 gold badge15 silver badges29 bronze badges

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

Comments

SiddAjmera · Accepted Answer · 2018-09-16 18:42:15Z

1

Use this to have access to the router as an injected dependency and arrow function syntax((e) => {}) to rescope it to the correct scope. Like this:

ngAfterViewInit() {
  $('#mymodal').on('hidden.bs.modal', (e) => {
    this.router.navigate(['/']);
  })
}

edited Sep 16, 2018 at 18:42

answered Sep 16, 2018 at 18:15

SiddAjmera

39.6k7 gold badges78 silver badges114 bronze badges

3 Comments

Erdna Over a year ago

Tried that as well, gives me "this.router is undefined"

SiddAjmera Over a year ago

Please update your question with the latest code that you've tried.

emccracken Over a year ago

Did you try with the above syntax (arrow function)? The above code will only work with arrow function, since that function will not have its own this. If you are going with the traditional anonymous function "function (e) { " you need to assign this to a custom var before the callback (as in suggestion below)

Collectives™ on Stack Overflow

Use injected dependency in jQuery event listener in angular

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related