joe

 addFirstLastPage() {
    setTimeout(() => {
      // add first/last page
      const firstPage = document.createElement("i")
      firstPage.classList.add('material-icons')
      firstPage.style.cursor = 'pointer'
      firstPage.innerHTML = 'first_page'
      firstPage.setAttribute('matTooltip', 'First page')
      const lastPage = document.createElement("i")
      lastPage.classList.add('material-icons')
      lastPage.innerHTML = 'last_page'
      lastPage.style.cursor = 'pointer'
      const pageContainer = document.getElementsByClassName('mat-paginator-range-actions')[0];
      const previousBtn = document.getElementsByClassName('mat-paginator-navigation-previous')[0];
      firstPage.addEventListener('click', () => {
        this.page = 0
        if (this.selectedType == 0) {
          this.getAsvResult(this.size, this.page)
        }
        else {
          this.data = [...this.virtualData.slice(0, this.size)]
        }
      })
      lastPage.addEventListener('click', () => {
        this.page = Math.ceil(this.total / this.size - 1)
        if (this.selectedType == 0) {
          this.getAsvResult(this.size, this.page)
        }
        else {
          this.data = [...this.virtualData.slice(this.size * (this.page + 1) - (this.size),
            this.size * (this.page + 1))]
        }
      })
      pageContainer.insertBefore(firstPage, previousBtn)
      pageContainer.appendChild(lastPage)
    }, 0);
  }