Geek Answers Handbook

How to focus an element in table2 when an element is clicked in table1 using angular2

I have 2 tables, one for vehicles and a company. If I click on the name of the vehicle, the corresponding company name will be indicated in the company table. So, now I have about 12 cars, when I click on the 12th vehicle, its name is displayed on the table of the Company, which is visible only when scrolling up. Therefore, I need to focus directly on the name of the company, and not on scrolling. Please, help

Here is my HTML code for Vehicle and Company:

Car table

<md-card *ngFor="let vehicle of vehicleLists | companyfilter:filter" (click)="goToCompany(vehicle)">
 <div >
    {{vehicle.vehicleName}}
  </div> 
   </md-card>

Company table:

<md-card  *ngFor="let company of companyLists | vehiclefilter:myfilter">
 <div>
     {{company.companyName}}
 </div></md-card>

TS code:

goToCompany(vehicle){
this.document.body.scrollTop = 0;
}

Using the answer in this link, I was able to get my requirement: Scroll up in angular2

, vwhicle, . . plunker , .

: https://plnkr.co/edit/ZjZApeGBk1P6OamYv21T?p=preview  , .

+6
2

,

  • tabindex

Angular 2 @Viewchild Renderer ElementRef

import --> AfterViewInit

 export class YourComponent implements AfterViewInit {
   @ViewChild('companyTable') vc: any;


  ngAfterViewInit() {
    this.vc.nativeElement.focus();
  }
}
<md-card class="col-lg-12 col-md-12 col-sm-12 col-xs-12" *ngFor="let company of companyLists | vehiclefilter:myfilter">
 <div #companyTable tabindex="0" class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="text-overflow: ellipsis;overflow: hidden;">
     {{company.companyName}}
 </div></md-card>
Hide result
0

, . ?

, .

  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
         <span id="{{company.companyName}}">{{company.companyName}}/span>
   </div>

. , componentyname direct.

<a href="#{{vehicle.companyName}}">{{vehicle.companyName}}</a>

div , . . , ,

0

More articles:


All Articles