this is how i was able to solve a problem i was having when i was using ngif inside the ion-header tag. This is the sample typescript code:
<ion-header *ngIf="quizInfo.quizType=='minimal' || quizInfo.quizType=='advanced'">
i must have spend almost two days trying to figure out what was going on, these are some of the debugging i did on my script:
1. quizid 52 - when you start question one, the question is blocked by the head.
2. i tried removing the style from the ion-app tag in index.html
3. i tried adding the style to quiz.html but doesnt work, the home.html does not show. if you go to the console, and your remove the top, it will aligh the question perfectly, however, when you start the quiz, you cant see anything, you can
bearly see something at the bottom of index.html
.scroll-content
4. tried removing innerHTML=questions.Question - did not work
5. tried chaing the h4 to a card>item but did not work either.
6. NOT SURE WHAT ELSE TO DO
FOUND ISSUE: in quiz.html, the first line of code is the following:<ion-header *ngIf="quizInfo.quizType=='minimal' || quizInfo.quizType=='advanced'">
HOWEVER, when i remove the ngIf, it works OK????
wow, i dont know what to do man?
SOLUTION: the solution was that since i was using a dynamic header, the script was not able to resize to all the conditions of my script, i found the answer here:
https://github.com/ionic-team/ionic/issues/7706
and the solution was here:
http://ionicframework.com/docs/api/components/content/Content/#advanced
http://ionicframework.com/docs/api/components/content/Content/#resize
so basically i added this to my quiz component:
import {Content } from 'ionic-angular';
...
export class whatever {
@ViewChild(Content) content: Content;
....
ngOnInit() {setTimeout(() => {this.content.resize();}, 1000);}
// resize it after one second the script has completed, this is the only way i've found so far to work, doesnt work if i put it in ngOnInit() or in any of my other methods
}
Hope that helps