#Coming from web Angular

This page lists everything that changes when you move Angular code from the browser to Lynx. Skim the cheat sheet first, then check the compatibility table for the features you use.

#Cheat sheet

Here's one component on each platform:

<!-- Web -->
<div class="card" (click)="select()">
  <img [src]="avatar" />
  <span>{{ name() }}</span>
</div>

<!-- Lynx -->
<view class="card" (bindtap)="select()">
  <image [src]="avatar" class="w-10 h-10" />
  <text>{{ name() }}</text>
</view>

#Templates

Lynx elements replace HTML. A Lynx app has no HTML engine, so <div> and <span> mean nothing to it. Lynx elements map to native UI controls instead. Elements and layout lists them all.

Text must be inside <text>. On the web, text can sit anywhere. On Lynx, text that isn't inside a <text> element doesn't render. Nest <text> elements to style part of a sentence.

Import LYNX_ELEMENTS. Add it to every component that uses Lynx elements, as ng generate component does. It gives you type checking in your editor and makes ng test compile.

import { Component } from '@angular/core';
import { LYNX_ELEMENTS } from '@blotch/angular-lynx';

@Component({
  selector: 'app-hello',
  imports: [LYNX_ELEMENTS],
  template: `<view><text>Hello</text></view>`,
})
export class Hello {}

#Events

Lynx events start with bind or catch:

• (bindtap) handles a tap and lets it bubble up to parent elements.
• (catchtap) handles a tap and stops it there.

Event data is in $event.detail. A text input's value, for example, is $event.detail.value.

Event handlers have one rule the web doesn't have. You can change signals freely, but don't navigate or open overlays directly inside a handler: wrap those calls in setTimeout. Threads: where your code runs explains why.

See Handling taps and events for every event.

#Styling

Lynx has its own CSS engine. It supports most layout CSS, but its defaults differ from a browser's:

• Elements stack vertically by default (display: linear). Add display: flex (Tailwind's flex) for flexbox.
• box-sizing is border-box, and margins don't collapse.
• Styles aren't inherited. Setting color on a <view> doesn't color the <text> inside it.
• rem is 14px, not 16px.
• Some features are missing: :hover, ::before, @media and !important.
• Component styles aren't isolated yet. A component's CSS applies to the whole app, so give classes distinct names or use CSS Modules.

CSS on Lynx covers every difference. Tailwind works through a Lynx preset.

#The JavaScript environment

Your code doesn't run in a browser. There's no DOM, so document.querySelector, window.addEventListener and localStorage don't exist. AngularLynx fills in what Angular itself needs, such as setTimeout and URL.

Libraries that touch the DOM, or depend on browser APIs, won't work. That includes Angular Material, most of the CDK, and chart libraries that draw on a <canvas>. The JavaScript environment lists what's available.

#Angular feature compatibility

✅ works as on the web · ⚠️ works with differences · ❌ not supported

#Related

• What is AngularLynx?
• Glossary: Lynx and mobile terms in plain words.