AngularJS [SOLVED]: get element source focus angular

AngularJS [SOLVED]: get element source focus angular

Home Forums Frameworks AngularJS tutorials AngularJS [SOLVED]: get element source focus angular

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #246221

    Cloudy Point
    Keymaster

    QuestionQuestion

    How to get element on focus.

    <kendo-autocomplete (focus)="relationsFocusAutoComplete($event.target)" 
     [(ngModel)]="vehicle.relation" name="relation-{{i}}">
    </kendo-autocomplete>
    

    Component

    relationsFocusAutoComplete(value: any) {
       console.log(value); //This is throws target undefined error
    }
    

    Error: Cannot read property ‘target’ of undefined

    i have tried like this

    <kendo-autocomplete (focus)="relationsFocusAutoComplete($event)" 
     [(ngModel)]="vehicle.relation" name="relation-{{i}}">
    </kendo-autocomplete>
    
     relationsFocusAutoComplete(value: any) {
       console.log(value); //This is also undefined
    }
    

    This is Kendo-Autocomplete is generated in a *ngFor if needed i will include section

    Issue in plunker

    Kendo-Autocomplete

    #246222

    Cloudy Point
    Keymaster

    Accepted AnswerAnswer

    you can use a template variable to access the autocomplete component and use toggle() method to show the autocomplete dropdown on focus and hide it on blur with the below code

    import { Component } from '@angular/core';
    
    @Component({
    selector: 'my-app',
    template: `
     <kendo-autocomplete #auto
         [data]="listItems"
         [placeholder]="placeholder"
         (focus)="auto.toggle()"
     >
    `
    })
    export class AppComponent {
      public placeholder: string = 'Type "it" for suggestions';
      public listItems: Array<string> = ["Item 1", "Item 2", "Item 3", "Item 4"];
    
    
    }
    

    link for fiddle :
    https://plnkr.co/edit/b5jJxx1xsPpjSZEW93wq?p=preview

    edit : for multiple autocomplete components with *ngFor you can use below , not sure if this is what you are looking for

    import { Component } from '@angular/core';
    
    @Component({
    selector: 'my-app',
    template: `
    
         <kendo-autocomplete *ngFor="let member of inputs;" #auto
         [data]="listItems"
         [placeholder]="placeholder"
         (focus)="auto.toggle()">
    `
    })
    export class AppComponent {
      public placeholder: string = 'Type "it" for suggestions';
      public listItems: Array<string> = ["Item 1", "Item 2", "Item 3", "Item 4"];
      public inputs : any = ['first item','second item','third item','fourth item'];
    
    
    }
    

    Edit 2 : The error you mentioned in plunker is mostly due to a syntax check issue in plunker itself

    you can use the below template . Actually plunker expects a closing </kendo-autocomplete> selector tag for the autocomplete before the closing <div> tag.

       <div *ngFor="let item of inputs; let i = index">
            <kendo-autocomplete #auto [data]="listItems" 
               [placeholder]="placeholder" (focus)="auto.toggle()">
            </kendo-autocomplete>
        </div>
    

    updated plunker : https://plnkr.co/edit/2teVCt94w3Es0lzyQWMX?p=preview

    Source: https://stackoverflow.com/questions/47958854/get-element-source-focus-angular
    Author: Niladri
    Creative Commons License
    This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.