Quiz
Six Ionic v7 questions that come up in code review.
Six Ionic design questions
EXAMPLE
# ============================================================ # Q1) ion-content vs ScrollView — when which? # ============================================================ # ANSWER: always ion-content for page-level scrolling. It handles safe-area, # keyboard avoidance, refresh, infinite scroll, and the platform-correct # bounce/scroll. Use plain divs ONLY when explicitly NOT scrolling. # ============================================================ # Q2) Page lifecycle hooks vs Angular ngOnInit? # ============================================================ # ANSWER: # - ngOnInit: runs once when the component is constructed # - ionViewWillEnter: runs every time the page becomes active (after navigation) # - ionViewWillLeave: runs when navigation leaves the page # - ionViewDidEnter / ionViewDidLeave: after animation completes # Use Ionic hooks for: refetch on focus, scroll restoration, page-bound timers. # ============================================================ # Q3) Where should I store tokens? # ============================================================ # ANSWER: # - NOT localStorage (recoverable from device backups) # - @capacitor/preferences: simple, encrypted on iOS, fine for non-secrets # - @capacitor-community/secure-storage / Keychain: proper credentials # - Cookies: same-origin only; pair with secure session APIs # ============================================================ # Q4) Live updates vs full app release? # ============================================================ # ANSWER: # - JS-only / asset changes -> Live Update (Appflow or capacitor-updater) # - Native plugin added or config changed -> rebuild + store submission # Set runtimeVersion / app version so OLD binaries refuse a new bundle that # requires native code they do not have. # ============================================================ # Q5) Tab navigation vs side menu? # ============================================================ # ANSWER: # - ion-tabs for 3-5 primary destinations (most apps) # - ion-menu for many sections OR auth-gated areas # - Bottom tabs on mobile feel more native; side menu is OK on iPad / tablet # ============================================================ # Q6) Why is your form input hidden by the keyboard? # ============================================================ # ANSWER: the page needs ion-content (auto keyboard avoidance) AND on iOS the # Capacitor Keyboard plugin should be configured: # capacitor.config.ts -> plugins.Keyboard.resize = 'native' (or 'ionic') # ============================================================ # Bonus — when should I drop Ionic and use plain Capacitor? # ============================================================ # ANSWER: when you do NOT need cross-platform UI components. Capacitor alone # wraps any web stack into a native shell; Ionic adds the UI library on top. # Plain Capacitor is great if you already have a React/Vue UI library you like. # ============================================================ # Scoring # 6 / 6 -> production-ready Ionic # 4 / 6 -> revisit ionic/cheatsheet # < 4 -> read the Ionic Framework docs intro
Why it matters
Use the Ionic UI components (ion-content, ion-button, ion-input) instead of styled HTML — they handle safe-area, keyboard, ripple, and dark mode automatically and look correct on both iOS and Android. Bend them with CSS variables; do not replace them.
Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.
Discussion
Loading…