Button styles not applying with ngFor

I have some buttons that aren’t styling correctly. I have a component that has a pair of buttons in it using a ngFor. Here’s a snippet of that template:

    <div class="answers" *ngIf="!isAnswered()">
        <button full *ngFor="let answer of question.answers; let i = index" (click)="chooseAnswer(answer)" [class]="getClass(answer)">{{ answer.answerText }}</button>

When the page first loads, here’s what I see:

If I click on a button on the navigation bar and go back, it renders correctly:

In fact, before the animation kicks off to bring up the new page, the style flips.

Am I doing something wrong? I tried including IONIC_DIRECTIVES as a dependency, but that didn’t work either.

Try to replace




Maybe it’s a DOM initialization issue.

There’s a few problems with that approach:

  1. It isn’t idiomatic.
  2. There’s no data until ngOnInit() is called, so everything starts crashing while trying to access null.
  3. Because there’s no data, there are no buttons, so rendering still won’t occur until later. This would likely result in the same issue.