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

Viewed 297

I have 2 tables one is for Vehicles and Company. If i click on vehicle name, its corresponding company name is shown in company table..So, now i have around 12 vehicles, when i click on 12th vehicle its name is displayed on Company table, which is seen only when i scroll up.So i need to focus directly on company name instead of scrolling. Please help

Here is my HTML code for Vehicle and Company:

Vehicle 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;
}

With the help of answer in this link, i was able to get my requirement: Scroll Top in angular2

But, here it applies only with the scroll top, if the company name list is below vwhicle name, it doesnt go down. I need my requirement to work in mobile response too,In this plunker it is working fine, biut not with my code.

Plunker link: https://plnkr.co/edit/ZjZApeGBk1P6OamYv21T?p=preview Please Help.

2 Answers
Related