Страничный просмотр страниц в угловых

Question

Я пытаюсь отобразить массив объектов как страницы просмотра документов Word, используя ngFor. Для этого я подготовил временный объект, и он работает нормально, и я могу отображать его в виде страниц на основе количества контента.

  var newPageContentLength = 0;
    var pageNo = 1;
    var pageObj = {
      page: `page${pageNo}`,
      data: []
    };
    let temp = [];
    this.contentViewArray = [];
    temp.forEach((item, i) => {
        newPageContentLength += item.content.length;
      if (i == 0) {
          pageObj.data.push({ ...item, ischecked: true });
        } else {
        if (newPageContentLength < 200) {
            pageObj.data.push({ ...item, ischecked: true });
          } else {
              this.contentViewArray.push({ ...pageObj });
            pageNo += 1;
            pageObj = {
              page: `page${pageNo}`,
              data: [{ ...item, ischecked: true }]
            };
            newPageContentLength = item.content.length;
          }
        }
      if (i == temp.length - 1) {
            this.contentViewArray.push({ ...pageObj });
        }

    });

Используя эту логику, я могу создавать номера страниц, если мойдлина содержимого более 200, но проблема в том, что если объект имеет длину содержимого более 200, например (если число равно 240), я хочу, чтобы 40 слов на следующей странице.

Я застрял в разрыве этих 40 словна вторую страницу.

В остальном все работает нормально.

ссылка на стек: https://stackblitz.com/edit/angular-vgleb3?embed=1&file=src/app/app.component.ts