How to highlight an input field text in angular 6

Question

This is (custom.component.html) file

         <input type="text" [(ngModel)]="name" (ngModelChange)="onNameChange()">
            <div *ngFor="let s of filteredScreenshots">
                {{s | json}}
             </div>


    <mat-card class="example-card" *ngFor="let filteredScreen of 
        filteredScreens"  let i = index>

      <mat-card-header>
         <div mat-card-avatar class="example-header-image" >
              <img mat-card-image class="list-img" src="{{filteredScreen?.img}}" >
        </div>
        <mat-card-content class="names"><b>{{ filteredScreen?.name }}</b></mat-card-content>
      </mat-card-header>
    </mat-card>

This is(customer.component.ts)

  import { Component, OnInit } from '@angular/core';
 import { Http } from '@angular/http'; 
 import { map } from 'rxjs/operators'
 import * as _ from 'lodash';


 @Component({
 selector: 'ylb-customer',
 templateUrl: './customer.component.html',
 styleUrls: ['./customer.component.css']
    })

 export class CustomerComponent  {
    spaceScreens: Array<any>;
    filteredScreens = [];
    name: string;


constructor(private http:Http){
    this.http.get('assets/app.json').pipe(
     map(response => response.json().screenshots)
   )
    .subscribe(res => {
        this.spaceScreens = this.sortByName(res); //this is what we filter against
         this.filteredScreens =  this.sortByName(res);//init with full list
     });
}

onNameChange() {    
    this.filteredScreens=_.filter(this.spaceScreens,(item)=>{
    console.log(this.name)
    return item.name.toLowerCase().indexOf(this.name.toLowerCase())>-1;
        });
    }
sortByName = function(users) {
    const byName = function(user1,user2) {
        return user1.name.localeCompare(user2.name);
        };
     return users.slice().sort(byName);
    };

}

This is the (app.json)json file present inside assets folder

        {   
        "screenshots":[ 

                    {
                        "img":"assets/img/json_2.jpg",
                        "name":"Virat Kohli"
                    },

                    {
                        "img":"assets/img/json_2.jpg",
                        "name":"Joe Root"
                    }




            ]        
        }

filtering is happening fine and it is displaying the json data(name) in alphabetical order.I want to highlight the text entering in the field like in mobile contact list as like in attached image.

enter image description here

Tried many resources but no result

Answer 1

Joniras's answer is great... but I found this problem to be all too common with little available with customizability and accessibility (like selecting, double clicking, proper focusing/blurring, etc.) I published a quick component that helps with that.

Hope it can help someone else too!

https://www.npmjs.com/package/ng-input-highlighter

Answer 2

In Chrome and also in other Browsers (see here) you can use a component like this:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'highlight'
})

export class HighlightSearch implements PipeTransform {

  transform(value: string, args: string): any {
    if (args && value) {
      value = String(value); // make sure its a string
      const startIndex = value.toLowerCase().indexOf(args.toLowerCase());
      if (startIndex !== -1) {
        const matchingString = value.substr(startIndex, args.length);
        return value.replace(matchingString, "<mark>" + matchingString + "</mark>");
      }

    }
    return value;
  }
}

To use like this:

<mat-card-content class="names"><b [innerHTML]="filteredScreen.name | highlight: name"></b></mat-card-content>