How to set focus list composed from div with *ngFor

[Dev C]

Hello, in my angular 6 application I would like to focus list composed from div tag below: I have search box where in usertypes and auto populated div appears wherein if user selects any list it should focus to the list which has been selected, I tried to put #data as below but things are not working, one click of div I have ts code if user selects from the list it appears using setValue method as given below. the project is big so I can not put URL nor could do composition. please help if you can

<div class="list-card" *ngFor="let data of listName; let i = index">

<div class="list-item"(click)="displaySelectedValue(data)">

<span class="list-name" #dataw>

{{data?.name}}

<span class="pull-right">

<em class="icon-17"></em><br />

<span>{{data?.portfolioListType}}</span>

</span>

</span>

<div *ngIf="showTillTip(data?.description) else showInstwithoutEllipses">

<span

[ngbTooltip]="showTooltip">{{ getEllipsesInstrument(data?.description) }}</span>

</div>

<ng-template #showInstwithoutEllipses>

<td>{{data?.description}}</td>

</ng-template>

<ng-template #showTooltip>

<bb-tooltip [data]="data?.description"></bb-tooltip>

</ng-template>

</div>

</div>

SetValue(SelectedList: string) {

this.inputField.nativeElement.value = SelectedList

this.divVisible = false;

if(this.dataw != undefined) {

console.log("1");

console.log(this.dataw)

this.dataw.changes.subscribe(()=>{

if (this.dataw !=undefined) {

console.log("!2")

console.log(this.dataw.last.nativeElement)

this.dataw.last.nativeElement.focus();

}})

}

}

[Sander Elias]

Hi,

Why are all the `?` in the code? you are inside a ngFor loop, so it's defined by definition.

Then the function seems completely unrelated to the template shown. There is too little to help you.

As a tip, if you are inside a ngFor loop, it is a bad idea to set variables on a component level, as those are shared for each instance. 

Regards

Sander

[Dev C]

I understand that but how about focusing on given element, if you can help.me.with this. May be giving some example.

Thanks

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/angular/91f031e5-f80a-4452-a282-8e27aa07d11a%40googlegroups.com.

--
Sent from my mi note 4 phone.

[Sander Elias]

Hi Dev,


Setting the focus from withing angular is the same as for native js.

@ViewChild("someTemplateVar") someTemplateVar: ElementRef;
 someMethod(): void {
   if (this.someTemplateVar.nativeElement) {
      this.someTemplateVar.nativeElement.focus();
   }
 }

Wrapping inside the if makes sure you will not run into problems with SSR.

Regards

Sander

[Dev C]

Yes but I have template with div with ngFor. I did same in my example and it is not working.

On Tuesday, September 17, 2019, Sander Elias <sande...@gmail.com> wrote:

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscribe@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/angular/7b75229a-34b7-44bf-b1b0-2f3d85e277dd%40googlegroups.com.

[Sander Elias]

Well, viewChild returns the occurrence of the template var. ngFor probably has multiple. also, its getting set afterViewInit.

Try using @viewChildren it has a queryList that you can iterate over for multiple instances

[Dev C]

Thanks Sander

@ViewChildren('dataw') rows: QueryList<ElementRef> |undefined

and in method

SetListFocus(){

this.rows.first.nativeElement.focus();

}

I did this but  not working.

On Tuesday, September 17, 2019, Sander Elias <sande...@gmail.com> wrote:

Well, viewChild returns the occurrence of the template var. ngFor probably has multiple. also, its getting set afterViewInit.

Try using @viewChildren it has a queryList that you can iterate over for multiple instances

--

You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscribe@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/angular/ef2fd72f-db08-45a1-91ff-1f5378adf05c%40googlegroups.com.

[Dev C]

Also I want to focus the div tag which has been selected by user in searchbox