Clash Royale CLAN TAG#URR8PPP

How to highlight an input field text in angular 6

This is (custom.component.html) file

<input type="text" [(ngModel)]="name" (ngModelChange)="onNameChange()">
<div *ngFor="let s of filteredScreenshots">
s
</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

1 Answer
1

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>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.