Migration from Classic to Lightweight Templates

Directive Translation Cheat Sheet

AngularJS Pattern	SolidJS Equivalent	Critical Notes
Interpolation
`{{ user.name }}`	`{user.name}` or `{user().name}`	✅ Auto-unwrapped if `user` is store or plain object. ⚠️ For signals: `{user()}` (call signal).
Conditionals
`<div ng-if="show">`	`<Show when={show()}><div>...</div></Show>`	✅ Use `<Show>` (from `'solid-js'`) for DOM removal. ❌ Avoid `&&` for complex children (causes hydration issues).
`<div ng-show="visible">`	`<div style={{ display: visible() ? 'block' : 'none' }}>`	Or use CSS classes + `classList`.
Lists
`<li ng-repeat="item in items">`	`<For each={items()}>{item => <li>{item.name}</li>}</For>`	✅ Always use `<For>`. ✅ Handles keys/reconciliation optimally.
Forms
`<input ng-model="search">`	`<input value={search()} onInput={e => setSearch(e.target.value)} />`	Explicit unidirectional flow. ✅ Checkbox: `checked={isChecked()} onChange={...}`.
Classes/Styles
`ng-class="{ active: isActive }"`	`classList={{ active: isActive() }}`	✅ Preferred method. Alternative: `class:active={isActive()}`.
`ng-style="{ color: c }"`	`style={{ color: c() }}`	Object syntax only.
Events
`ng-click="submit()"`	`onClick={submit}`	✅ No `()` in handler ref. ✅ Params: `onClick={() => delete(id)}`.
Filters
`{{ date \| date:'short' }}`	`{formatDate(date(), 'short')}`	❌ No pipe syntax. ✅ Create helper functions/utils.

AngularJS to SolidJS Template Migration

1. Expression Syntax

Classic:

HTML

<p>{{ user.name }}</p>
<button ng-click="doSomething()">Click</button>

Lightweight:

HTML

<p>{user.name}</p>
<button onClick={doSomething}>Click</button>

2. Conditionals

Classic:

HTML

<div ng-if="isVisible">Content</div>
<div ng-show="isVisible">Content</div>

Lightweight:

HTML

<Show when={isVisible}>
  <div>Content</div>
</Show>

<div style={{ display: isVisible() ? 'block' : 'none' }}>
  Content
</div>

3. Loops

Classic:

HTML

<ul>
  <li ng-repeat="item in items" ng-class="{ active: item.selected }">
    {{ item.name }}
  </li>
</ul>

Lightweight:

HTML

<ul>
  <For each={items}>
    {(item) => (
      <li class={item.selected ? 'active' : ''}>
        {item.name}
      </li>
    )}
  </For>
</ul>

4. Two-way Data Binding

Classic:

HTML

<input ng-model="user.email" />
<p>{{ user.email }}</p>

Lightweight:

HTML


<input
  value={email()}
  onInput={(e) => setEmail(e.target.value)}
/>
<p>{email()}</p>

// JS tab
const [email, setEmail] = createSignal('');

5. Event Handlers

Classic:

HTML

<button ng-click="handleClick($event, item)">Click</button>
<form ng-submit="submitForm()"></form>

Lightweight:

HTML

<button onClick={(e) => handleClick(e, item)}>Click</button>
<form onSubmit={submitForm}></form>

6. Class and Style Bindings

Classic:

HTML

<div ng-class="{ active: isActive, disabled: isDisabled }"></div>
<div ng-style="{ color: textColor, 'font-size': fontSize }"></div>

Lightweight:

HTML

<div classList={{ active: isActive(), disabled: isDisabled() }}></div>
<div style={{ color: textColor(), fontSize: fontSize() }}></div>

7. Form Elements

Classic:

HTML

<select ng-model="selectedItem"
        ng-options="item.name for item in items">
</select>

<input type="checkbox" ng-model="isChecked" />

Lightweight:

HTML

<select value={selectedItem()}
        onChange={(e) => setSelectedItem(e.target.value)}>
  <For each={items}>
    {(item) => <option value={item.value}>{item.name}</option>}
  </For>
</select>

<input
  type="checkbox"
  checked={isChecked()}
  onChange={(e) => setIsChecked(e.target.checked)}
/>

8. ng-switch Equivalent

Classic:

HTML

<div ng-switch="user.role">
  <div ng-switch-when="admin">Admin Panel</div>
  <div ng-switch-when="user">User Panel</div>
  <div ng-switch-default>Guest Panel</div>
</div>

Lightweight:

HTML

<Switch>
  <Match when={user().role === 'admin'}>
    <div>Admin Panel</div>
  </Match>
  <Match when={user().role === 'user'}>
    <div>User Panel</div>
  </Match>
  <Match when={true}>
    <div>Guest Panel</div>
  </Match>
</Switch>

9. ng-init Equivalent

Classic:

HTML

<div ng-init="count = 0"></div>

Lightweight:

// JS tab
const [count, setCount] = createSignal(0);

10. ng-bind Equivalent

Classic:

HTML

<span ng-bind="title"></span>
<span ng-bind-html="htmlContent"></span>

Lightweight:

HTML

<span>{title()}</span>
<span innerHTML={htmlContent()} />

Last updated: July 07, 2026