@angular/core#IterableChangeRecord TypeScript Examples

ngAfterViewInit() {
        const differ = this.differs.find(this.childrenComponent).create((index, item) => {
            return item;
        });
        // first diff
        differ.diff(this.childrenComponent);
        const parentElement: HTMLElement = this.elementRef.nativeElement.parentElement;
        if (this.childrenComponent.length > 0) {
            parentElement.insertBefore(this.createFragment(), this.elementRef.nativeElement);
            this.elementRef.nativeElement.remove();
        }
        this.childrenComponent.changes.subscribe((value) => {
            const iterableChanges = differ.diff(this.childrenComponent);
            if (iterableChanges) {
                iterableChanges.forEachOperation((record: IterableChangeRecord<T>, previousIndex: Number, currentIndex: number) => {
                    // removed
                    if (currentIndex === null) {
                        return;
                    }
                    // added or moved
                    this.handleContainerItemChange(record, parentElement);
                });
            }
        });
    }

handleContainerItemChange(record: IterableChangeRecord<T>, parentElement: HTMLElement) {
        // first insert
        if (this.elementRef.nativeElement.parentElement && this.elementRef.nativeElement.parentElement === parentElement) {
            const fragment = document.createDocumentFragment();
            fragment.append(...record.item.rootNodes);
            parentElement.insertBefore(fragment, this.elementRef.nativeElement);
            this.elementRef.nativeElement.remove();
            return;
        }
        // insert at start location
        if (record.currentIndex === 0) {
            const fragment = document.createDocumentFragment();
            fragment.append(...record.item.rootNodes);
            parentElement.prepend(fragment);
        } else {
            // insert afterend of previous component end
            let previousRootNode = this.getPreviousRootNode(record.currentIndex);
            if (previousRootNode) {
                record.item.rootNodes.forEach((rootNode) => {
                    previousRootNode.insertAdjacentElement('afterend', rootNode);
                    previousRootNode = rootNode;
                });
            } else {
                this.viewContext.editor.onError({
                    code: SlateErrorCode.NotFoundPreviousRootNodeError,
                    name: 'not found previous rootNode',
                    nativeError: null
                })
            }
        }
        // Solve the block-card DOMElement loss when moving nodes
        record.item.appendBlockCardElement();
    }

/**
   * Renders rows based on the table's latest set of data, which was either provided directly as an
   * input or retrieved through an Observable stream (directly or from a DataSource).
   * Checks for differences in the data since the last diff to perform only the necessary
   * changes (add/remove/move rows).
   *
   * If the table's data source is a DataSource or Observable, this will be invoked automatically
   * each time the provided Observable stream emits a new data array. Otherwise if your data is
   * an array, this function will need to be called to render any changes.
   */
  renderRows() {
    this._renderRows = this._getAllRenderRows();
    const changes = this._dataDiffer.diff(this._renderRows);
    if (!changes) {
      return;
    }
    const viewContainer = this._rowOutlet.viewContainer;
    changes.forEachOperation(
      (
        record: IterableChangeRecord<RenderRow<T>>,
        prevIndex: number | null,
        currentIndex: number | null
      ) => {
        if (record.previousIndex == null) {
          this._insertRow(record.item, currentIndex!);
        } else if (currentIndex == null) {
          viewContainer.remove(prevIndex!);
        } else {
          const view = <RowViewRef<T>>viewContainer.get(prevIndex!);
          viewContainer.move(view!, currentIndex);
        }
      }
    );

    // Update the meta context of a row's context data (index, count, first, last, ...)
    this._updateRowIndexContext();

    // Update rows that did not get added/removed/moved but may have had their identity changed,
    // e.g. if trackBy matched data on some property but the actual data reference changed.
    changes.forEachIdentityChange(
      (record: IterableChangeRecord<RenderRow<T>>) => {
        const rowView = <RowViewRef<T>>viewContainer.get(record.currentIndex!);
        rowView.context.$implicit = record.item.data;
      }
    );
  }