Effective Use of Angular Content Projection

{
  "title": "Effective Use of Angular Content Projection",
  "description": "Learn how to use content projection to create flexible and reusable components in your Angular applications.",
  "category": "Angular Cursor Rules",
  "rules": [
    {
      "pattern": "<ng-content>",
      "message": "Ensure that <ng-content> is used to create flexible and reusable components by allowing dynamic content insertion.",
      "severity": "info"
    },
    {
      "pattern": "<ng-content select=\"[\\w-]+\">",
      "message": "Use the 'select' attribute in <ng-content> for multi-slot content projection to project content into specific slots.",
      "severity": "info"
    },
    {
      "pattern": "@ContentChild\\(\\s*['\"]?[\\w-]+['\"]?\\s*\\)",
      "message": "Use @ContentChild to interact with projected content within the component.",
      "severity": "info"
    },
    {
      "pattern": "@ContentChildren\\(\\s*['\"]?[\\w-]+['\"]?\\s*\\)",
      "message": "Use @ContentChildren to query multiple projected elements within the component.",
      "severity": "info"
    },
    {
      "pattern": ":host ::ng-deep",
      "message": "Avoid using ':host ::ng-deep' for styling projected content as it can lead to maintenance challenges. Prefer defining well-understood CSS contracts or using ::ng-deep sparingly.",
      "severity": "warning"
    },
    {
      "pattern": "ngAfterContentInit\\(\\)",
      "message": "Implement ngAfterContentInit lifecycle hook to perform initialization tasks related to projected content.",
      "severity": "info"
    },
    {
      "pattern": "ngAfterContentChecked\\(\\)",
      "message": "Implement ngAfterContentChecked lifecycle hook to handle changes in projected content, such as updates from *ngIf or *ngFor directives.",
      "severity": "info"
    },
    {
      "pattern": "ng-content",
      "message": "Ensure that <ng-content> is used appropriately to enhance component reusability and maintainability.",
      "severity": "info"
    }
  ]
}