Merge pull request #3435 from IgniteUI/grid-search-samples

feat(grid search): updating sample chips

Author: Konstantin Dinev

package-lock.json

@@ -9,8 +9,8 @@
 
     <igx-suffix>
         <div class="caseSensitiveButton">
-            <button igxIconButton="flat" igxRipple [igxRippleCentered]="true" (click)="updateSearch()"
-                [style.background]="caseSensitive ? 'rgb(73, 180, 254)' : 'transparent'">
+            <button type="button" igxIconButton="flat" igxRipple [igxRippleCentered]="true" (click)="updateSearch()"
+                [style.background]="caseSensitive ? 'rgb(73, 180, 254)' : 'transparent'" title="Match case">
                 <igx-icon class="caseSensitiveIcon" family="material">text_fields</igx-icon>
             </button>
         </div>

src/app/data-display/text-highlight/text-highlight-sample-1/text-highlight-sample-1.component.html

@@ -1,13 +1,13 @@
 /* eslint-disable max-len */
-import { Component, ViewChild } from '@angular/core';
+import { Component, OnDestroy, ViewChild } from '@angular/core';
 import { IgxTextHighlightDirective, IgxTextHighlightService } from 'igniteui-angular';
 
 @Component({
     selector: 'app-text-highlight-1',
     styleUrls: ['./text-highlight-sample-1.component.scss'],
     templateUrl: './text-highlight-sample-1.component.html'
 })
-export class TextHighlightSample1Component {
+export class TextHighlightSample1Component implements OnDestroy {
     @ViewChild(IgxTextHighlightDirective, { read: IgxTextHighlightDirective, static: true })
     public highlight: IgxTextHighlightDirective;
     // tslint:disable max-line-length
@@ -28,6 +28,10 @@ export class TextHighlightSample1Component {
 
     constructor(private highlightService: IgxTextHighlightService) { }
 
+    public ngOnDestroy() {
+        this.highlightService.destroyGroup('group1');
+    }
+
     public searchKeyDown(ev) {
         if (this.searchText) {
             if (ev.key === 'Enter' || ev.key === 'ArrowDown' || ev.key === 'ArrowRight') {

src/app/data-display/text-highlight/text-highlight-sample-1/text-highlight-sample-1.component.ts

@@ -1,13 +1,13 @@
 /* eslint-disable max-len */
-import { Component, ViewChildren } from '@angular/core';
+import { Component, OnDestroy, ViewChildren } from '@angular/core';
 import { IgxTextHighlightDirective, IgxTextHighlightService } from 'igniteui-angular';
 
 @Component({
     selector: 'app-text-highlight-2',
     styleUrls: ['./text-highlight-sample-2.component.scss'],
     templateUrl: './text-highlight-sample-2.component.html'
 })
-export class TextHighlightSample2Component {
+export class TextHighlightSample2Component implements OnDestroy {
     @ViewChildren(IgxTextHighlightDirective)
     public highlights;
     // tslint:disable max-line-length
@@ -34,6 +34,10 @@ export class TextHighlightSample2Component {
 
     constructor(private highlightService: IgxTextHighlightService) { }
 
+    public ngOnDestroy() {
+        this.highlightService.destroyGroup('group1');
+    }
+
     public searchKeyDown(ev) {
         if (this.searchText) {
             if (ev.key === 'Enter' || ev.key === 'ArrowDown' || ev.key === 'ArrowRight') {

src/app/data-display/text-highlight/text-highlight-sample-2/text-highlight-sample-2.component.ts

@@ -1,13 +1,13 @@
 /* eslint-disable max-len */
-import { Component, ViewChild } from '@angular/core';
+import { Component, OnDestroy, ViewChild } from '@angular/core';
 import { IgxTextHighlightDirective, IgxTextHighlightService } from 'igniteui-angular';
 
 @Component({
     selector: 'app-text-highlight-style',
     styleUrls: ['./text-highlight-style.component.scss'],
     templateUrl: './text-highlight-style.component.html'
 })
-export class TextHighlightStyleComponent {
+export class TextHighlightStyleComponent implements OnDestroy {
     @ViewChild(IgxTextHighlightDirective, { read: IgxTextHighlightDirective, static: true })
     public highlight: IgxTextHighlightDirective;
 
@@ -27,6 +27,10 @@ export class TextHighlightStyleComponent {
 
     constructor(private highlightService: IgxTextHighlightService) { }
 
+    public ngOnDestroy() {
+        this.highlightService.destroyGroup('group1');
+    }
+
     public searchKeyDown(ev) {
         if (this.searchText) {
             if (ev.key === 'Enter' || ev.key === 'ArrowDown' || ev.key === 'ArrowRight') {

src/app/data-display/text-highlight/text-highlight-style/text-highlight-style.component.ts

@@ -21,10 +21,10 @@
             <div class="chips">
                 <igx-chips-area>
                     <igx-chip (click)="updateSearch()" [color]="caseSensitive? 'lightgrey' : 'rgba(0, 0, 0, .04)'">
-                        <span>Case Sensitive</span>
+                        <span title="Match case">Aa</span>
                     </igx-chip>
                     <igx-chip (click)="updateExactSearch()" [color]="exactMatch? 'lightgrey' : 'rgba(0, 0, 0, .04)'">
-                        <span>Exact Match</span>
+                        <u title="Exact match">Ab</u>
                     </igx-chip>
                 </igx-chips-area>
             </div>

src/app/grid/grid-search-sample/grid-search-sample.component.html

@@ -21,10 +21,10 @@
             <div class="chips">
                 <igx-chips-area>
                     <igx-chip (click)="updateSearch()" [color]="caseSensitive? 'lightgrey' : 'rgba(0, 0, 0, .04)'">
-                        <span>Case Sensitive</span>
+                        <span title="Match case">Aa</span>
                     </igx-chip>
                     <igx-chip (click)="updateExactSearch()" [color]="exactMatch? 'lightgrey' : 'rgba(0, 0, 0, .04)'">
-                        <span>Exact Match</span>
+                        <u title="Exact match">Ab</u>
                     </igx-chip>
                 </igx-chips-area>
             </div>