Angular Style Guide

Naming Conventions 📚

• Components: Use PascalCase for component names (e.g., UserProfileComponent)
• Directives/Pipes: Use camelCase (e.g., userProfileDirective, formatDatePipe)
• Files: Match component names (e.g., user-profile.component.ts)
• Variables/Functions: Use snake_case (e.g., user_profile, calculateTotal())

Component Structure 🏗️

// Example: Component file structure
@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss']
})
export class ExampleComponent {
  // Component logic here
}

• Always place component logic in separate files
• Use @Input()/@Output() for data binding
• Follow the Angular component best practices for maintainability

Template Best Practices 🌿

• Use semantic HTML tags
• Keep templates simple and focused
• Avoid inline styles - use CSS classes
• Use *ngFor/*ngIf with proper trackBy functions

Styles & Themes 🎨

• Prefer SCSS over CSS for better maintainability
• Use CSS variables for theme customization
• Follow BEM naming convention for classes
• Check Angular styling guide for detailed examples

Code Quality 🧪

• Enable TypeScript strict mode
• Use Angular CLI for project scaffolding
• Follow Angular CLI best practices for project structure
• Use RxJS operators with proper error handling

For more advanced styling techniques, check our Angular Styling Guide section.