File

src/lib/kiewit-autocomplete/kiewit-autocomplete.component.ts

Metadata

selector kiewit-autocomplete
styleUrls kiewit-autocomplete.component.scss
templateUrl ./kiewit-autocomplete.component.html

Index

Properties
Methods
Inputs
Outputs

Inputs

dataSource

Type: any[]

Outputs

onSelectValue $event type: EventEmitter<any>

Methods

selectValueEvent
selectValueEvent(newVal: )
Parameters :
Name Type Optional Description
newVal
Returns : void

Properties

model1
model1: string
Type : string
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'kiewit-autocomplete',
  templateUrl: './kiewit-autocomplete.component.html',
  styleUrls: ['./kiewit-autocomplete.component.scss']
})
export class KiewitAutoCompleteComponent {
    model1: string;
    @Input()
    dataSource: any[];

    @Output()
    onSelectValue: EventEmitter<any> = new EventEmitter();

    selectValueEvent(newVal) {
        this.onSelectValue.emit(newVal);
    }
}
<div ng2-auto-complete
     [source]="dataSource"
     (valueChanged)="selectValueEvent($event)">
  <input placeholder="" [ngModel]="model1" />
</div>
Implementation
In Type Script File

nimport { Component, Input, Output, EventEmitter } from '@angular/core';
import { Ng2AutoCompleteModule } from 'ng2-auto-complete';
@Component({
  selector: 'kiewit-autocomplete',
  templateUrl: './kiewit-autocomplete.component.html',
  styleUrls: ['./kiewit-autocomplete.component.scss']
})
export class KiewitAutoCompleteComponent implements OnInit {

  public UsersDataConfig: any[];
  public listformatter: any = 'Name';
  public displaypropertyname: any = 'Name'
  ngOnInit(): void {
    //Get call to Service to load Auto Complete TextBox
    this.Service.getUsers().subscribe(data => {
      if (data.length > 0) {
        this.UsersDataConfig = data;
      }
    });
  }
  getSelectedUser(value) {
    // logic based on selection text 
  }

}     
       
In HTML File

<kiewit-autocomplete [dataSource]="UsersDataConfig" [listformatter]="listformatter" [displaypropertyname]="displaypropertyname" (kcsValueChange)="getSelectedUser($event)" >
</kiewit-autocomplete >
       
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""