Angular Cursor Rules
Learn about cursor rules specific to Angular development.
Angular-Specific Rules
Cursor rules in Angular provide intelligent navigation and manipulation capabilities designed specifically for Angular development. These rules help you work more efficiently with Angular components, services, and template syntax.
Component Navigation
- Navigate between component definitions
- Jump to service declarations
- Move between template sections
Smart Selection
- Select template blocks and expressions
- Expand selection to include decorators
- Smart component metadata selection
Code Manipulation
- Quick component insertion
- Automated decorator handling
- Dependency injection management
Best Practices
- Use template-aware navigation
- Leverage decorator-specific cursor movements
- Utilize component-aware selection
Examples
// Navigate between component sections
@Component({
selector: 'app-user-profile',
template: `
<div class="user-profile">
<h1>{{ user.name }}</h1>
<app-user-stats
[stats]="userStats"
(update)="handleUpdate($event)"
></app-user-stats>
</div>
`
})
export class UserProfileComponent implements OnInit {
@Input() user: User;
userStats: UserStats;
constructor(
private userService: UserService,
private statsService: StatsService
) {}
ngOnInit() {
this.loadUserStats();
}
private loadUserStats() {
this.statsService.getUserStats(this.user.id)
.subscribe(stats => this.userStats = stats);
}
handleUpdate(stats: UserStats) {
this.userStats = stats;
}
}
Configuration
Customize Angular-specific cursor rules in your settings:
{
"angular.cursorRules": {
"componentNavigation": true,
"smartSelection": true,
"templateHandling": true
}
}