Ui Style Guide

Naming Conventions

• Files: Kebab-case (e.g., session-page.component.ts, auth.service.ts).
• Classes: PascalCase (e.g., SessionPageComponent, AuthService).
• Selectors: app- prefix, kebab-case (e.g., app-user-profile).
• Signals: No suffix, descriptive noun/verb (e.g., user(), isLoading()).
• Observables: $ suffix (e.g., user$).

3. Component Standards

Definition

• Use Standalone Components (standalone: true is default in v19+).
• Prefer Inline Templates for most components to keep logic and view co-located.
• Avoid external CSS files; use Tailwind CSS utility classes directly in the template.

@Component({
    selector: 'app-example',
    imports: [CommonModule, RouterLink], // Explicit imports
    template: `
    <div class="p-4 bg-surface-100 rounded-lg">
      <h1 class="text-2xl font-bold text-gray-900">{{ title() }}</h1>
    </div>
  `
})
export class ExampleComponent {
    title = signal('Hello World');
}

Control Flow

Use the new built-in Angular Control Flow syntax.

<!-- Good -->
@if (isLoading()) {
<app-spinner/>
} @else {
@for (item of items(); track item.id) {
<app-item [data]="item"/>
}
}

Dependency Injection

Prefer the inject() function over constructor injection for better type inference and cleaner code.

// Good
private readonly
route = inject(ActivatedRoute);
private readonly
store = inject(SessionStore);

// Avoid if possible
constructor(private