CODEWITHSUNDEEP
jqueryangular
Timur
Timur

Reputation: 383

Angular: order list by data-order using jQuery

I have list of boxes which i load from DB. I am trying to make an ordering function which orders boxes by data-order, it should be triggered when user clicks the button.

Component

 import { JQ_TOKEN} from "../../_service/index";
 constructor( @Inject(JQ_TOKEN) private $: any ) {}

Order Function

orderGames() {
    var boxList = this.$('.box');
    var container = this.$('.box-list-container');
    boxList.sort(function (a: any, b: any) {
        return this.$(a).data("order") - this.$(b).data("order");
    });
    container.html(boxList);
}

I receive next the following error:

EXCEPTION: Error in app/dark-navbar.component.html:44:24 caused by: Cannot read property '$' of undefined

How can I make it work?

Upvotes: 0

Views: 106

Answers (2)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

Actually I didn't work with angular before .. but as a jquery function you can use something like

orderGames(el) {
    var boxList = $(el).find('.box');
    var container = $(el).find('.box-list-container');
    boxList.sort(function (a, b) {
        return $(a).data("order") - $(b).data("order");
    });
    container.html(boxList);
}

and use it like 

orderGames(this)

Note: .find() Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element... and while I don't know your structure I can't determine which jquery function you will need may be .find() , .prev() , .closest() .. etc

Upvotes: 0

Tamas
Tamas

Reputation: 11214

You shouldn't be needing this. Here's how I use jQuery in conjunction with Angular:

declare var $: any;

@Component({
  selector: 'some-thing',
  templateUrl: './template.html'
})

export class ApplicationComponent implements AfterViewInit {
  public results: String[] = [];

  public ngAfterViewInit() {
    $('#offcanvas').click(() => $('.row-offcanvas').toggleClass('active'));
  }
}

Upvotes: 1

Related Questions