Isotope load after a button click

[jgaffod]

Hi everyone, can anyone tell me how to achieve my problem, I have data calling from remote server then I want to load isotope after clicking the search button and called the data from API

[jgaffod]

this is my js code

function clickIsotope() {
  var $container1 = $('#container1'),
    $body = $('body'),
    columns = null,
    $pointer = $('pointer');
  if ($pointer.click) {
    console.log('here we go again');
    $container1.isotope({
      // disable window resizing
      resizable: false,
      masonry: {
        columnWidth: colW
      }
    });
    $(window).smartresize(function () {
      var currentColumns = Math.floor(($body.width()) / colW);
      if (currentColumns !== columns) {
        if ($(window).width() >= 360 && $(window).width() <= 400) {
          columns = 2;
          $container1.width(columns * 150).isotope('reLayout');
        } else if ($(window).width() >= 401 && $(window).width() <= 440) {
          columns = 2;
          $container1.width(columns * 188).isotope('reLayout');
        } else if ($(window).width() >= 441 && $(window).width() <= 480) {
          columns = 2;
          $container1.width(columns * 210).isotope('reLayout');
        } else if ($(window).width() >= 481 && $(window).width() <= 520) {
          columns = 2;
          $container1.width(columns * 240).isotope('reLayout');
        } else {
          columns = currentColumns;
          // apply width to container manually, then trigger relayout
          $container1.width(columns * colW).isotope('reLayout');
        }
      }
    }).smartresize();
  }
}

[jgaffod]

Angular component code

import { Component, OnInit, ViewChildren, ChangeDetectorRef } from '@angular/core';
import { SearchPageService } from './search-page.service';
import { SearchPage } from './searchpage';

import { ActivatedRoute, Router } from "@angular/router";
import { SearchService } from '../travel-search/search.service';
import { tap, distinctUntilChanged, debounceTime, switchMap } from 'rxjs/operators';
import { Subject } from 'rxjs/Subject';

declare function loadisotope();
declare function clickIsotope();

@Component({
  selector: 'app-searchpage',
  templateUrl: './searchpage.component.html',
  styleUrls: ['./searchpage.component.css']
})
export class SearchpageComponent implements OnInit {
  errorMessage: string;
  searchResult: SearchPage[];
  searchTerm: any;
  searchName: any;
  // for suggestions
  suggestions = [];
  suggestionsLoading = false;
  suggestionTypeahead = new Subject<string>();
  selectedSuggestion;

  selectedItem = {};

  @ViewChildren('isotopeitems') items: any;

  constructor(
    private searchApiService: SearchPageService,
    private route: ActivatedRoute,
    private searchService: SearchService,
    private cd: ChangeDetectorRef,
    private router: Router,
  ) {
    this.route.params.subscribe(params => {
      this.searchTerm = params.term;
      this.searchName = this.searchTerm.split(/[0-9\-_]+/).join('');
    });
  }
  ngOnInit() {
    this.getSearchResult();
    // typehead for pipe
    this.suggestionTypeahead.pipe(
      tap(() => this.suggestionsLoading = true),
      distinctUntilChanged(),
      debounceTime(200),
      switchMap(term => this.searchService.searchSuggestions(term)),
    ).subscribe(res => {
      if (
        res.hasOwnProperty('suggest') &&
        res.suggest.hasOwnProperty('alternateNames-suggestion') &&
        res.suggest['alternateNames-suggestion'].length > 0 &&
        res.suggest['alternateNames-suggestion'][0].hasOwnProperty('options')
      ) {
        const value = res.suggest['alternateNames-suggestion'][0].options;
        this.suggestions = value;
      } else {
        this.suggestions = [];
      }
      this.suggestionsLoading = false;
      this.cd.markForCheck();
    }, () => {
      //this.suggestions = [];
      //this.suggestionsLoading = false;
    });
  }
  //Load isotope
  ngAfterViewInit() {
    this.items.changes.subscribe(t => {
      loadisotope();
    })
  }
//Get result from API
  getSearchResult(): void {
    this.searchApiService.getSearch(this.searchTerm)
      .subscribe(
        searchResult => {
          this.searchResult = searchResult['rsltCol'];
        },
        error => this.errorMessage = <any>error);
  }
  //Search in search page
  onClickSearch() {
    const selected = this.selectedSuggestion;
    if (!selected) {
      // TODO error handling
      return
    }
    this.router.navigate(['/wordoftravel/destination/', selected.text + "-" + selected._id]);
    this.getSearchResult();
    this.items.changes.subscribe(t => {
      clickIsotope();
    })
  }
  //Modal popup
  selectItem(item) {
    this.selectedItem = item;
    console.log(item);
  }
}
```
`