Angular Formatter
Format Angular components, services, templates, and styles according to the official Angular Style Guide
Formatted Angular code will appear here...Angular Style Guide
This formatter follows the official Angular Style Guide recommendations for code organization, naming conventions, and formatting. It helps maintain consistency across your Angular applications.
TypeScript Guidelines:
- Use classes for components, services, directives, pipes
- Use @Input() and @Output() decorators
- Implement lifecycle interfaces (OnInit, OnDestroy)
Template Guidelines:
- Use kebab-case for element selectors
- Use camelCase for property bindings
- Use star syntax for structural directives
Angular Best Practices
- ✓ One class per file
- ✓ Use consistent import order
- ✓ Name files as feature.type.ts
- ✓ Use OnInit for initialization
- ✓ Unsubscribe from observables
Angular CLI Integration
This formatter follows the same conventions as Angular CLI generated code. Use these commands to create properly formatted Angular artifacts:
ng generate component user-profile
ng generate service api/user
ng generate directive highlight
ng generate pipe truncate
ng generate module sharedFor existing projects, you can use these tools alongside this formatter:
- Prettier: Opinionated code formatter
- ESLint: Linting with Angular plugin
- Stylelint: CSS/SCSS linting
TypeScript Formatting
Formats Angular components, services, directives, and pipes with proper decorator spacing, import organization, and class structure.
Template Formatting
Formats Angular templates with proper indentation for structural directives, property bindings, and event handlers.
Style Formatting
Formats CSS and SCSS with proper nesting, selector organization, and property ordering for component styles.
Angular Style Guide Recommendations
File Structure
- One class per file
Each file should contain only one component, service, directive, or pipe.
- Consistent naming
Use feature.type.ts naming convention (e.g., user-profile.component.ts).
- Group by feature
Organize files by feature modules rather than by file type.
Code Organization
- Import order
Angular imports, then third-party, then application imports.
- Property order
Inputs, outputs, public properties, private properties.
- Method order
Lifecycle hooks, public methods, private methods.
Angular CLI Integration
This formatter follows the same conventions as Angular CLI generated code. Use these commands to create properly formatted Angular artifacts:
ng generate component user-profile --flat falseng generate service api/user --skip-tests falseng generate directive highlight --skip-tests falseng generate pipe truncate --skip-tests falseng generate module shared --flat truePro Tip
Use --skip-tests false to generate test files along with components
Frequently Asked Questions
Related Developer Tools
All code formatting is performed client-side in your browser. Your Angular code never leaves your device. No information is stored or transmitted to any server.
