fix(extension): Row Detail gets blanked out for no reason, fixes #546 (…

…#552)

- it seems that when trying to find the DOM element of the row detail, we should always use the last one instead of the first one found
- final fix for issue #546

src/app/examples/grid-rowdetail.component.ts

@@ -2,7 +2,6 @@ import { Component, OnInit } from '@angular/core';
 import {
   AngularGridInstance,
   Column,
-  ExtensionName,
   FieldType,
   Filters,
   Formatters,

src/app/modules/angular-slickgrid/extensions/rowDetailViewExtension.ts

@@ -243,24 +243,24 @@ export class RowDetailViewExtension implements Extension {
   /** Redraw the necessary View Component */
   redrawViewComponent(createdView: CreatedView) {
     const containerElements = document.getElementsByClassName(`${ROW_DETAIL_CONTAINER_PREFIX}${createdView.id}`);
-    if (containerElements && containerElements.length) {
+    if (containerElements && containerElements.length >= 0) {
       this.renderViewModel(createdView.dataContext);
     }
   }
 
   /** Render (or rerender) the View Component (Row Detail) */
   renderPreloadView() {
     const containerElements = document.getElementsByClassName(`${PRELOAD_CONTAINER_PREFIX}`);
-    if (containerElements && containerElements.length) {
-      this.angularUtilService.createAngularComponentAppendToDom(this._preloadComponent, containerElements[0], true);
+    if (containerElements && containerElements.length >= 0) {
+      this.angularUtilService.createAngularComponentAppendToDom(this._preloadComponent, containerElements[containerElements.length - 1], true);
     }
   }
 
-  /** Render (or rerender) the View Component (Row Detail) */
+  /** Render (or re-render) the View Component (Row Detail) */
   renderViewModel(item: any): CreatedView | null {
     const containerElements = document.getElementsByClassName(`${ROW_DETAIL_CONTAINER_PREFIX}${item[this.datasetIdPropName]}`);
-    if (containerElements && containerElements.length) {
-      const componentOutput = this.angularUtilService.createAngularComponentAppendToDom(this._viewComponent, containerElements[0], true);
+    if (containerElements && containerElements.length > 0) {
+      const componentOutput = this.angularUtilService.createAngularComponentAppendToDom(this._viewComponent, containerElements[containerElements.length - 1], true);
       if (componentOutput && componentOutput.componentRef && componentOutput.componentRef.instance) {
         // pass a few properties to the Row Detail template component
         Object.assign(componentOutput.componentRef.instance, {