feat: render header and footer content children

Author: zewa666

src/app/modules/angular-slickgrid/components/angular-slickgrid.component.html

@@ -1,4 +1,6 @@
 <div id="slickGridContainer-{{gridId}}" class="gridPane">
+  <ng-container *ngTemplateOutlet="slickgridHeader"></ng-container>
   <div attr.id='{{gridId}}' class="slickgrid-container" style="width: 100%">
   </div>
+  <ng-container *ngTemplateOutlet="slickgridFooter"></ng-container>
 </div>

src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts

@@ -3,13 +3,15 @@ import {
   ApplicationRef,
   ChangeDetectorRef,
   Component,
+  ContentChild,
   ElementRef,
   EventEmitter,
   Inject,
   Input,
   OnDestroy,
   Optional,
   Output,
+  TemplateRef,
 } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
@@ -265,6 +267,9 @@ export class AngularSlickgridComponent<TData = any> implements AfterViewInit, On
     return this._registeredResources;
   }
 
+  @ContentChild('slickgridHeader', { static: true }) slickgridHeader?: TemplateRef<any>;
+  @ContentChild('slickgridFooter', { static: true }) slickgridFooter?: TemplateRef<any>;
+
   constructor(
     protected readonly angularUtilService: AngularUtilService,
     protected readonly appRef: ApplicationRef,