Btukfyl

I realize this violates best practice, but this is customer requirements. I just need an idea of how to get this to work. Angular Materials do not meet the requirements my customer has, so I basically need to do this 'the hard way'.

The customer has unique markup they want applied, and I am doing it with JQuery. The markup turns the 'select' into a ul/li so it appears to be a fancy dropdown box. But I need to get the change of selection from that fancy drop down, back to the 'select', then back to Angular TS to act on it. This is a reactive form, so the moment a user changes item status, I update the database without the need to click 'save'. The requirements specifically state that the user must not be required to click a button after they change status.

In short, I need to fire the Angular/CLI 6 'change' from Jquery. I can't find a successful way to do it with Angular/CLI 6. I've found very good ways to do this in Angular/JS, and Angular/CLI v 4 (deprecated in v 6). I need to do this in Angular/CLI v 6, and all of the examples that I have found, fail to work in Angular/CLI v 6.

Here is my HTML: (abbreviated for clarity). Note, the 'select' is inside of a for loop, which does add another level of complexity to it

<div *ngFor="let item of items">

     <select id="itemStatus" (change)="changeItemStatus($event)">

          <option value="1">Status 1</option>

          <option value="2">Status 2</option>

          <option value="3">Status 3</option>

          <option value="4">Status 4</option>

          <option value="5">Status 5</option>

     </select>

</div>

Here is the markup for my 'select' boxes, called on 'ngOnInit'. I put a series of '*' on the lines that are trying to fire the 'onchange'. This never gets back to Angular. You see that I tried 2 different methods, but the 'change' never gets called. Obviously I shouldn't do both, but neither one works. I know these work fine normally, but they are not setting up proper linkage to Angular.

$('select:not(.select-hidden)').each(function () {

  const $this = $(this);

  const numberOfOptions = $(this).children('option').length;



  $this.addClass('select-hidden');

  $this.wrap('<div class="select">');

  $this.after('<div class="select-styled"></div>');



  const $styledSelect = $this.next('div.select-styled');

  if ($(this).val())

  {

    $styledSelect.text($($this).parent().find('option:selected').text());

  }

  else

  {

    $styledSelect.text($this.children('option').eq(0).text());

  }



  const $list = $('<ul />', {

    'class': 'select-options'

  }).insertAfter($styledSelect);



  for (let i = 0; i < numberOfOptions; i++) {

    $('<li />', {

      text: $this.children('option').eq(i).text(),

      rel: $this.children('option').eq(i).val()

    }).appendTo($list);

  }



  const $listItems = $list.children('li');



  $styledSelect.click(function (e) {

    e.stopPropagation();

    $this.val('active');

    $('div.select-styled.active').not(this).each(function () {

      $(this).removeClass('active').next('ul.select-options').hide();

    });

    $(this).toggleClass('active').next('ul.select-options').toggle();

  });



  $listItems.click(function (e) {

    e.stopPropagation();

    $styledSelect.text($(this).text()).removeClass('active');

    $this.val($(this).attr('rel')).change(); *********************

    $this.val($(this).attr('rel')).trigger('change'); *********************

    $list.hide();

  });



  $(document).click(function () {

    $styledSelect.removeClass('active');

    $list.hide();

  });

});