SearchBar

<SearchBar
  hint="Enter search term here ..."
  [text]="searchPhrase"
  (textChange)="onTextChanged($event)"
  (clear)="onClear($event)"
  (submit)="onSubmit($event)"
>
</SearchBar>

import { Component } from '@angular/core'
import { SearchBar } from '@nativescript/core'

@Component({
  moduleId: module.id,
  templateUrl: './usage.component.html'
})
export class UsageComponent {
  searchPhrase: string

  onSubmit(args) {
    const searchBar = args.object as SearchBar
    console.log(`Searching for ${searchBar.text}`)
  }

  onTextChanged(args) {
    const searchBar = args.object as SearchBar
    console.log(`Input changed! New value: ${searchBar.text}`)
  }

  onClear(args) {
    const searchBar = args.object as SearchBar
    console.log(`Clear event raised`)
  }
}

<SearchBar
  id="searchBar"
  hint="Enter search term here ..."
  text="{{sbText}}"
  clear="onClear"
  submit="onSubmit"
/>

import { Observable, Page, PropertyChangeData, SearchBar } from '@nativescript/core'

export function onNavigatingTo(args) {
const page = args.object as Page
const vm = new Observable()
vm.set('sbText', '')
vm.on(Observable.propertyChangeEvent, (propertyChangeData: PropertyChangeData) => {
if (propertyChangeData.propertyName === 'sbText') {
const searchBar = propertyChangeData.object as SearchBar
console.log(`Input changed! New value: ${propertyChangeData.value}`)
}
})
page.bindingContext = vm
}

export function onSubmit(args) {
const searchBar = args.object as SearchBar
console.log(`Searching for ${searchBar.text}`)
}

export function onClear(args) {
const searchBar = args.object as SearchBar
console.log(`Clear event raised`)
}