Ionic 2 ion-card getElementById returns null - ionic-framework

Question

I have an ion-card list of elements in a page and I want to navigate to a specific position when entering the view, the page renders properly and I can see in the generated code that div with specific id is indeed on the view but trying to get the element by id is returning null.
Here is the code for the view where I build the cards:
<ion-content class="cards-bg">
<ion-card *ngFor="let meal of meals">
<ion-card-header>
{{meal.date | date: 'dd/MM/yyyy HH:mm'}}
</ion-card-header>
<div id="{{meal.id}}">
<img src="{{serverUrl + '/' + meal.picture}}">
</div>
<ion-card-content>
<ion-card-title>
{{meal.title}}
</ion-card-title>
<p>{{meal.description}}</p>
</ion-card-content>
</ion-card>
<ion-row no-padding></ion-row>
</ion-content>
And this is the code that tries to get the reference to the element so I can navigate to it:
public index: string;
constructor(public navCtrl: NavController, navParams: NavParams, public mealService: MealService) {
this.index = navParams.get('index');
}
ionViewDidEnter() {
this.mealService.getMeals().then((result) => {
this.meals = result;
let yOffset = document.getElementById(this.index).offsetTop;
this.content.scrollTo(0, yOffset, 1000);
}).catch((error) => {
console.log(error);
});
As I mentioned the page with cards render, I can even see the generated code contains the specific div with id but the call:
document.getElementById(this.index)
returns null, so I get the following error in logs:
chromium: [INFO:CONSOLE(57687)] "TypeError: Cannot read property 'offsetTop' of null", source: file:///android_asset/www/build/main.js (57687)

Answer 1

Use Angular`s ElementRef
Inject it in constructor:
constructor(private elRef:ElementRef){}
For getting the element,
let el = this.elRef.nativeElement;//get underlying native element.
let yOffset = el.getElementById(this.index).offsetTop;
Or you could also use ViewChildren:
Set an id for the div:
<div #divElement id="{{meal.id}}">
<img src="{{serverUrl + '/' + meal.picture}}">
</div>
Set the decorator on a class variable:
#ViewChildren('divElement')
divs:any;
For accessing elements,
let yOffset = this.divs[this.index].nativeElement.offsetTop