chore(grid-lite): Make samples consistent with documentation

Author: Mariela Tihova

src/app/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.html

@@ -4,7 +4,11 @@
     <igx-grid-lite-column field="price" header="Price (€)" dataType="number"></igx-grid-lite-column>
     <igx-grid-lite-column field="sold" header="Units Sold" dataType="number"></igx-grid-lite-column>
     <igx-grid-lite-column field="total" header="Total Revenue" dataType="number"></igx-grid-lite-column>
-    <igx-grid-lite-column field="rating" header="Customer Rating ⭐" dataType="number">
+    <igx-grid-lite-column field="rating" dataType="number">
+        <ng-template igxGridLiteHeader let-value>
+            <h3>⭐ Rating ⭐</h3>
+        </ng-template>
+
         <ng-template igxGridLiteCell let-value>
             <igc-rating [value]="value" readonly step="0.01" min="0" max="5">
             </igc-rating>

src/app/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.ts

@@ -2,7 +2,7 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core
 import { CommonModule } from '@angular/common';
 import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';
 import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service';
-import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective, IgxGridLiteColumnConfiguration } from 'igniteui-angular/grids/lite';
+import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective, IgxGridLiteHeaderTemplateDirective } from 'igniteui-angular/grids/lite';
 
 defineComponents(IgcRatingComponent);
 
@@ -14,7 +14,8 @@ defineComponents(IgcRatingComponent);
         CommonModule,
         IgxGridLiteComponent,
         IgxGridLiteColumnComponent,
-        IgxGridLiteCellTemplateDirective
+        IgxGridLiteCellTemplateDirective,
+        IgxGridLiteHeaderTemplateDirective
     ],
     schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })

src/app/grid-lite/grid-lite-data-binding-dynamic/grid-lite-data-binding-dynamic.component.html

@@ -1,5 +1,5 @@
 <div class="grid-lite-wrapper">
-    <igc-button (click)="switchData()">Switch data</igc-button>
+    <button igxButton="flat" (click)="switchData()">Switch data</button>
     <igx-grid-lite
       [autoGenerate]="true"
       [data]="data">

src/app/grid-lite/grid-lite-data-binding-dynamic/grid-lite-data-binding-dynamic.component.ts

@@ -1,10 +1,8 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { defineComponents, IgcButtonComponent } from 'igniteui-webcomponents';
 import { GridLiteDataService, ProductInfo, UserSimple } from '../grid-lite-data.service';
 import { IgxGridLiteComponent, IgxGridLiteColumnComponent } from 'igniteui-angular/grids/lite';
-
-defineComponents(IgcButtonComponent);
+import { IgxButtonDirective } from 'igniteui-angular/directives';
 
 @Component({
   selector: 'app-grid-lite-data-binding-dynamic',
@@ -13,7 +11,8 @@ defineComponents(IgcButtonComponent);
   imports: [
     CommonModule,
     IgxGridLiteComponent,
-    IgxGridLiteColumnComponent
+    IgxGridLiteColumnComponent,
+    IgxButtonDirective
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })