How to call Angular method 4 in HTML code generated by jQuery?

Navigation
0

I'm using a template that I bought in Angular, but it's not all in Angular has a lot of jQuery.

I'm using jQuery's Datatable (since it's already the template's native, it's all css ready and it's already fetching the data and paging), but I need some actions on some elements that I need (I want) that is processed by the angular. How to bookmark a checkbox for example.

I'm using the fnRowCallback from Datatable to handle the html. In the example below I would like to change the checkbox state (html generated by the jQuery plugin) the data is sent to the changePropertyEnabled method (Angular component method) 

...,
fnRowCallback: function (nRow, aData, iDisplayIndex) {
        const mDataEnabled = '<label class="ui-switch switch-icon">' +
          '<input type="checkbox" (change)="changePropertyEnabled(1, false)">' +
          '<span></span>' +
          '</label>';
        const mDataRemoveIcon = '<a class="text-muted font-16" href="javascript:;"><i class="ti-trash"></i></a>';
        //
        $('td:eq(0)', nRow).html(mDataEnabled);
        $('td:eq(6)', nRow).html(mDataRemoveIcon);
        return nRow;
      },
 ...


 changePropertyEnabled(id: number, enabled: boolean) {
    alert('Hello World');
  }
    
asked by anonymous 09.11.2018 / 14:18

1 answer

0

I was able to resolve it as follows: 

ngAfterViewInit(): void {
    const self = this;
    const dtAccount = $('#dt-account');
    dtAccount.DataTable({
      pageLength: 10,
      fixedHeader: true,
      responsive: true,
      processing: true,
      serverSide: true,
      ajax: {
        url: this.api.getBaseUri('/service/v1/accounts'),
        type: 'POST'
      },
      fnRowCallback: function (nRow, aData, iDisplayIndex) {
        const mDataEnabled = '<label class="ui-switch switch-icon">' +
          '<input type="checkbox">' +
          '<span></span>' +
          '</label>';
        const mDataRemoveIcon = '<button class="btn btn-outline-danger btn-icon-only btn-circle btn-sm btn-thick dt-remove-icon">' +
          '<i class="ti-trash"></i>' +
          '</button>';
        //
        const mAccount = new Account();
        mAccount.fromObject(aData);
        // Custom fields
        $('td:eq(0)', nRow).html(mDataEnabled);
        $('td:eq(6)', nRow).html(mDataRemoveIcon);
        // Enabled button
        const mInputEnabled = $('td:eq(0)', nRow).find('input');
        mInputEnabled.prop('checked', mAccount.enabled);
        mInputEnabled.change(function (e) {
          mAccount.enabled = $(this).prop('checked');
          self.changePropertyEnabled(mAccount);
        });​
        // Remove button
        const mButtonRemove = $('td:eq(6)', nRow).find('.dt-remove-icon');
        mButtonRemove.click(function (e) {
          self.deleteAccount(mAccount);
        });​
        return nRow;
      },
      columns: [
        {'data': 'enabled'},
        {'data': 'firstName'},
        {'data': 'lastName'},
        {'data': 'email'},
        {'data': 'created'},
        {'data': 'modified'},
        {'data': 'id'}
      ],
      'sDom': 'rtip',
      columnDefs: [{
        targets: 'no-sort',
        orderable: false
      }]
    });
  

With this I kept the self to be a reference for my component, to use in both angular and jQuery calls 

const self = this;
  

Set the enable button in mDataEnabled 

const mDataEnabled = '<label class="ui-switch switch-icon">' +
              '<input type="checkbox">' +
              '<span></span>' +
              '</label>';
  

I created a static HTML that was not being manipulated by Angular and I inserted it in html 

 $('td:eq(0)', nRow).html(mDataEnabled);
  

I used jQuery to retrieve the element I wanted to manipulate (input) 

 const mInputEnabled = $('td:eq(0)', nRow).find('input');
  

I added the handling logic I wanted 

 mInputEnabled.change(function (e) {
          mAccount.enabled = $(this).prop('checked');
          self.changePropertyEnabled(mAccount);
        });​
  

I used the self to talk to relate to the element rendered by jQuery with Angle Component. 

 self.changePropertyEnabled(mAccount);

I do not know if it's the best way, but it worked. If you have another better way of doing it, just post it and thank you.

    
09.11.2018 / 18:10
Error handling with Spring MVC and ThymeLeaf fill municipality's combobox according to the selected state in Angular