HighlightSearch

Highlight Search

To Highlight the searched Text we are using a pipe, which transforms the inner HTML text.

How does the pipe work

The pipe uses the transform funtion to wrap the text, matching the search pattern with a class:

<span class='highlight'>${match[0]}</span>

The class highlight is defined in the main scss file and sets the background to the color yellow. More informations about pipes can be found in the official dokumentation from Angular.

Example usage in the Stakeholder Domain

In this example the given div shows the GUI ID of a stakeholder object. The shown value is refered in the first part of the [innerHTML] tag before the '|'. In order to use the highlightSearch pipe it is necessary to refer the searchtext which is done by passing the variable, which contains the searchtext. In this case: 'highlightSearch: stakeholderDataService.searchtext'. The stakeholderDataService.searchtext contains the searched text given by an input field.

<div [innerHTML]="stakeholder.guiId | highlightSearch: stakeholderDataService.searchtext">
</div>

In the Project the input field is defined in a component which is called: app-search-bar. The following code shows the usage of this component.

 <app-search-bar (searchTextChanged)="highlightTextChange($event)"></app-search-bar>

The event searchTextChanged is fired when the text in the inputfield has changed. The Method "highlightTextChange($event)" is defined in the component to handle the $event which represents the search pattern.

Example Usage in a Selectbox

<mat-select [(ngModel)]="impact.valueEntity" (selectionChange)="valueEntityChange(impact, $event)">
    <mat-select-trigger>
                <div [innerHTML]="impact.valueEntity.name | highlightSearch: 'Feelings'"> </div>
    </mat-select-trigger>

     <mat-option *ngFor="let val of impactDataService.valueDataService.values"
                          [value]="val" [disabled]="val.disable">

                <div [innerHTML]="val.name | highlightSearch: 'Feelings'"></div> 

     </mat-option>
</mat-select>