Standalone components with utility classes.

Conditional classes#

Component.tsx
ts
@Component({
  template: `
    <button [class.bg-blue-500]="active"
            class="px-4 py-2 rounded-lg">
      Toggle
    </button>
  `,
})
export class ToggleComponent {
  active = false;
}

Patterns that scale#

  • [class.x] bindings for toggles; static utilities in the template
  • Consider standalone components with utility templates

Gotchas#

  • Template concatenation defeats scanning
Tip. Dynamic class fragments must be visible to the content scanner — full class names in source, or a configuration/safelist|safelist.