angular/material

Hi All,

I have a component the below template in a separ

import { Component } from '@angular/core';

@Component( {
selector: 'jhi-search-component',
template: `
<form class="form-inline" (ngSubmit)="search()" >
<div >
<span class="col-sm-4">Search By</span>

      <select class="form-control col-sm-4" [(ngModel)]="propkey" name="propkey">
              <option value=" "></option>
             <option   *ngFor="let prop of entity | keyvalue"> {{prop.value}}</option>
        </select>           
    <select class="form-control col-sm-4 " [(ngModel)]="operation" name="operation" >
                <option value='='>=</option>
                <option value='<'>&lt;</option>
                <option value='>'>&gt;</option>                 
        </select>
       <input class="form-control mr-sm-2 col-sm-4" type="search" placeholder="Search" aria-label="Search" [(ngModel)]="searchvalue" name="searchvalue">
   <button class="btn btn-primary float-right" type="submit">
   <fa-icon [icon]="'search'"></fa-icon>
   </button>  
   </div>       
      </form>`

} )
export abstract class SearchComponent {
searchvalue: any;
operation: any;
propkey: any;
entity: any[];
abstract search();

}

and i have addded the component in another component as <jhi-search-component></jhi-search-component>

I would like to set the this properties in another component that acutally uses it ,in the component that actually displays this i set the this class properties ,
but still it is not reflected in the screen

As this template uses ngModel my expectation is that the two way is enabled and that it shoud detect the changes and display.

But it didnt

Also the search inspite of the component implemeting ..it didnt execute it.

an anyone suggest me what is wrong..

All these properties will have their values only after ngOnInit of the component actually using this.