import { Component, Input, OnInit } from '@angular/core';

@Component({
selector: 'country-filter',
templateUrl: './countryFilter.component.html',
styleUrls: ['./countryFilter.component.scss']
})

export class CountryFilter implements OnInit {

@Input() countryList: string[];

ip: string = '';

result: string[] = [];
ngOnInit() {
this.result = this.countryList;
}

onChange(value) {
if (value == '') {
this.result = this.countryList;
}
else {
this.result = [];
this.countryList.forEach(element => {
if (element.toLowerCase().includes(value.toLowerCase()))
this.result.splice(this.result.length, 0, element);
});
}
}

render() {
return this.result.length != 0;
}
}

component.ts file

html code idi

<section class="layout-column align-items-center mt-50">
<input type="text" class="large" placeholder="Enter Country Name" id="app-input"
data-test-id="app-input"
[ngModel]='ip' (ngModelChange)='onChange($event)' />

<ul *ngIf='render()' class="card country-list" data-test-id="countryList">

<li *ngFor='let country of result' class="pa-10 pl-20">{{country}}</li>
</ul>
​
 <div *ngIf='!render()' class="mt-50 slide-up-fade-in" id="no-result"
data-test-id="no-result">No Results Found</div>
</section>