Examples

Small, complete AngularLynx apps, each focused on one feature or screen. Every example page runs the app live next to its source code.

Using the previews

Each page embeds a live preview, which shows the code and the running app side by side:

Code — the example's source, opened at its main file. Open Files to browse every file in the project.
Web — runs the example in your browser through the web renderer of Lynx. It's close to a phone, but not identical.
QR Code — scan it with Lynx Explorer (Lynx's dev app for phones, see Glossary) to run the example on a real device.

The preview's footer names the example's folder, and its GitHub button opens that folder in the repository.

Run an example locally

Every example is an Angular project in the repository's examples/ folder. You need Node.js 22.12 or newer. Clone the repository, then start an example by its folder name:

git clone https://github.com/Blotch-Smart-Frames/AngularLynx.git
cd AngularLynx
npm install
npx turbo run start --filter=@angular-lynx-example/hello-world

Pick an example — replace hello-world with the folder name from the preview's footer.
What the command does — it builds the AngularLynx packages the example needs, then runs ng serve.
Open it — ng serve prints a QR code for Lynx Explorer and a link to the web preview (Glossary). See Quick Start.

Getting Started

Example	What it shows
Hello World	Lynx elements, a signal and a tap handler
Counter	`computed()` state and the Button and Card components
Todo List	`@for`, text input and `(catchtap)`
Form Input	`<input>` and `<textarea>` events
Signal Forms	Angular signal forms with validation

App Patterns

Full screens built from the UI components.

Example	What it shows
Settings Page	Switches, a select, a radio group and a confirm dialog
User Profile	Avatar, badge, card and an edit sheet
Notification Center	Long-press actions, toasts and an empty state
Checkout Form	A multi-step form with a progress bar
FAQ / Help Center	Search, collapsible groups, an accordion and a dialog
Loading States	Progress bars, skeletons, spinners and toasts
Task Manager	Filtered tabs, checkboxes, a sheet and an action sheet
Media Player	Toggles, a progress bar and a collapsible queue
Onboarding Wizard	Steps, a radio group and selectable cards
Contact List	Search, sticky headers, dialogs and an alert dialog

Layout & Scrolling

Example	What it shows
Infinite Scroll	`<list>` loading more rows near the end
Pull to Refresh	`<refresh>` and `<refresh-header>`

Interaction

Example	What it shows
Gestures	Pan, tap and exclusive gestures with `[lynxGesture]`
Modal Dialog	`<overlay>` with a tap-to-close backdrop
Main-Thread Scripts	`mainThreadFn()` handlers that restyle on every touch

Animation

Example	What it shows
Animations	CSS transitions, `@keyframes` and `animate()`
Enter and Leave Transitions	`LynxTransition` and `LynxTransitionGroup`

Styling

Example	What it shows
CSS Modules	Hashed, scoped class names
Custom Fonts	Font files loaded with `@font-face`

Data & State

Example	What it shows
Host Data	`LynxInitData` and `LynxGlobalData` as signals
Session Storage	`LynxSessionStorage` with a reactive `watch()`

Platform

Example	What it shows
Defer Blocks	`@defer` with signal and timer triggers
Error Boundary	`@boundary`, `$reset` and per-error fallbacks
Error Handling	Catching an error and showing it on screen
Internationalization	`i18n`, `$localize` and `LynxLocale`
SSR	Snapshot encoding with `ssrEncode()`
Multi-Page	Separate bundles from `lynx.config.ts` or `angular.json`

#Examples

#Using the previews

#Run an example locally

#Getting Started

#App Patterns

#Layout & Scrolling

#Interaction

#Animation

#Styling

#Data & State

#Platform