iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

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.

Example

Example
// 3 questions per lesson.
Try it Yourself »

Discussion

Loading…