Angular TypeScript sahayamu

[usauae]

bros, naaku oka list item vundi, which has hundreds of names sorted alphabetically(source API).

requirement: if I type 'F' on my keyboard, the list should scroll lo the names starting with F.

yevaru aina ilantidi chesara ? can you please help me

 

https://stackblitz.com/edit/angular-lrsztw?file=src/app/app.component.html

[usauae]

Keyboard event anta ready chesa but not sure how to make the list scroll.

[Pitta]

[usauae]

Ltt

[kittaya]

forgot my previous answer

[kittaya]

38 minutes ago, usauae said:

bros, naaku oka list item vundi, which has hundreds of names sorted alphabetically(source API).

requirement: if I type 'F' on my keyboard, the list should scroll lo the names starting with F.

yevaru aina ilantidi chesara ? can you please help me

 

https://stackblitz.com/edit/angular-lrsztw?file=src/app/app.component.html

knchm jquery vaadu broo... 

 

window keyup event listen cheyyali 

hostlisner all the time

then fire event 

use jquery or javascript to move specific ID 

 

[usauae]

17 minutes ago, kittaya said:

knchm jquery vaadu broo... 

 

window keyup event listen cheyyali 

hostlisner all the time

then fire event 

use jquery or javascript to move specific ID 

 

$(this)[0].scrollIntoView(); ila antava bro ?

[Kootami]

1 hour ago, usauae said:

bros, naaku oka list item vundi, which has hundreds of names sorted alphabetically(source API).

requirement: if I type 'F' on my keyboard, the list should scroll lo the names starting with F.

yevaru aina ilantidi chesara ? can you please help me

 

https://stackblitz.com/edit/angular-lrsztw?file=src/app/app.component.html

'f' names thos list filter avvala ?

 

 

public InputText = new Subject<any>();

ngonit

{

this.inputText$.subscribe((inputLetter:any)=>{

this.inputList= this.inputList.filter(x=>x.name.contains(inputLetter);

}

}

 

 

 

[kittaya]

https://stackblitz.com/edit/angular-bcuv45?file=src/app/app.component.ts

done

[kittaya]

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

import { fromEvent } from 'rxjs';

 

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  name = 'Angular';

 

  items: any[] = [

    {

      name: 'A Sachin'

    },

    {

      name: 'B Sachin'

    },

    {

      name: 'C Sachin'

    },

    {

      name: 'D Sachin'

    },

    {

      name: 'E Sachin'

    },

    {

      name: 'F Sachin'

    },

    {

      name: 'G Sachin'

    },

    {

      name: 'H Sachin'

    },

    {

      name: 'I Sachin'

    },

    {

      name: 'J Sachin'

    },

    {

      name: 'K Sachin'

    },

    {

      name: 'L Sachin'

    }

  ];

 

  idList = [];

 

  getId(val, i) {

    this.idList.push(val.split(' ')[0] + i);

    return val.split(' ')[0];

  }

 

  getrespectiveId(key) {

    return this.idList[

      this.idList.findIndex(

        val => val.split('')[0].toLowerCase() == key.toLowerCase()

      )

    ];

  }

 

  constructor() {

    fromEvent(window, 'keydown').subscribe((event: KeyboardEvent) => {

      console.log(event.key);

      console.log(this.getrespectiveId(event.key));

      document.getElementById(this.getrespectiveId(event.key)).scrollIntoView({

        behavior: 'smooth'

      });

    });

  }

}

[kittaya]

<hello name="{{ name }}"></hello>

<p>

  Start editing to see some magic happen :)

</p>

 

<div class="container border" style="height: 100px;  overflow: auto;">

 

  <ul style="list-style : none">

 

    <li *ngFor="let item of items;index as i"><span id="{{getId(item.name, i)+ i}}">{{item.name}}</span></li>

 

  </ul>

 

</div>

[kittaya]

removed some glitch here 

https://stackblitz.com/edit/angular-bcuv45?file=src/app/app.component.ts

[kittaya]

8 minutes ago, usauae said:

$(this)[0].scrollIntoView(); ila antava bro ?

solution here 

https://stackblitz.com/edit/angular-bcuv45?file=src/app/app.component.ts

[usauae]

24 minutes ago, kittaya said:

solution here 

https://stackblitz.com/edit/angular-bcuv45?file=src/app/app.component.ts

super bro stackblitz lo work avutundi, but not on my page. may be because there are more than one list on the page.

chustunna easy ga yemi aina fix cheyavachhu yemo ani

 

[kittaya]

5 minutes ago, usauae said:

super bro stackblitz lo work avutundi, but not on my page. may be because there are more than one list on the page.

chustunna easy ga yemi aina fix cheyavachhu yemo ani

 

Cool bro