Ionic Version 3 Segment Button Binding Error (example works in Ionic ver 2)


Any Help would be GREATLY Appreciated - Thanks!!!

When binding a segment button using these requirements:

  • bound by FormGroup
  • segment button values (choices) come async from database
  • segment button bound with initial value (string)

I get this error - ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ‘false’. Current value: ‘true’.

I very simplified version, which throws the error, is shown below and available at

HTML *************************************

CODE *************************************

Ion-segment: dynamically generated segment buttons with validation not working
Event doesnt trigger on RxJs subscribe

Removing the ngIf on the form will fix this problem. Your code will still break in production. You need to make any property accessed from the template public.


Thanks Rapropos, I appreciate the input!

Removing the *ngIf eliminated the error… However, any segment-button added after the page-view is still un-bindable.

To illustrate. I updated the GitHub with coffee & tea loaded before page-view and milk loaded after. The results are coffee/tea are bindable and milk is not.

Why this is important… many times I need to get segment button choices asynchronously.


There are several workarounds suggested in #6923.