AG Grid Angular Snippets
A Visual Studio Code extension that provides snippets for AG Grid Angular development.
⚠️ Disclaimer ⚠️
This is NOT an official AG Grid extension or snippet collection. It is a community-developed tool to enhance the AG Grid development experience and is not affiliated with, endorsed by, or sponsored by AG Grid Ltd.
Features
Tab Stops and Placeholders
All snippets use VS Code's tab stop and placeholder system to make customization easier:
- Use
Tab to move between tab stops
- Placeholders with the same number (e.g.,
${1:label}) are connected and will update simultaneously
- Use
${n|option1,option2|} for choice placeholders with predefined options
- The final cursor position is marked with
$0
Example:
// When using aggrid-basic snippet:
@Component({
selector: '${1:app-grid}', // Tab stop 1
templateUrl: './${2:grid}.component.html', // Tab stop 2
styleUrls: ['./${2:grid}.component.css'], // Connected to tab stop 2
standalone: true,
imports: [AgGridModule]
})
export class ${3:GridComponent} { // Tab stop 3
// ... rest of the code ...
$0 // Final cursor position
}
TypeScript Snippets
| Prefix |
Description |
Tab Stops |
aggrid-basic |
Creates a basic AG Grid Angular component with standard configuration |
1: selector, 2: component name, 3: class name, 4-6: field names, 0: final position |
aggrid-coldef |
Creates an AG Grid column definition with common properties |
1: field name, 2: header name, 3-5: boolean options, 6: width, 0: final position |
aggrid-import |
Imports AG Grid modules and styles |
1: theme name, 2: dark mode option, 0: final position |
aggrid-cellrenderer |
Creates an AG Grid cell renderer component |
1: selector, 2: component name, 3: class name, 0: final position |
aggrid-celleditor |
Creates an AG Grid cell editor component with input handling |
1: selector, 2: class name, 0: final position |
aggrid-header |
Creates an AG Grid custom header component with menu button |
1: selector, 2: class name, 0: final position |
aggrid-enterprise |
Creates an AG Grid component with enterprise features and modules |
1: selector, 2: component name, 3: class name, 4-6: field names, 0: final position |
aggrid-group |
Creates AG Grid column groups definition with nested columns |
1-10: group and column names, 0: final position |
aggrid-cols |
Basic AG Grid column definitions with multiple fields |
1-3: field names, 0: final position |
aggrid-default-col |
Default column definition for AG Grid with common settings |
1-3: boolean options, 4: flex value, 0: final position |
aggrid-ready |
AG Grid onGridReady event handler with API initialization |
1: initialization code, 0: final position |
aggrid-events |
Common AG Grid event handlers for selection and clicks |
1-3: event parameter names, 0: final position |
aggrid-rowdata |
Sample row data structure for AG Grid |
1: type, 2-9: field and value pairs, 0: final position |
aggrid-pagination |
AG Grid pagination configuration with page size settings |
1-3: pagination options, 0: final position |
aggrid-filter |
AG Grid column with filter parameters and options |
1: field name, 2: filter type, 3: debounce time, 0: final position |
aggrid-formatter |
AG Grid column with value formatter for custom display |
1: field name, 2: header, 3-4: formatter logic, 0: final position |
aggrid-renderer-func |
AG Grid column with function cell renderer for custom content |
1: field name, 2: header, 3: class name, 4: value expression, 0: final position |
aggrid-getter |
AG Grid column with value getter for computed values |
1: field name, 2: header, 3: getter logic, 0: final position |
aggrid-sort |
AG Grid column with sort configuration and index |
1: field name, 2: header, 3: sortable, 4: sort direction, 5: sort index, 0: final position |
aggrid-api-methods |
Common AG Grid API methods for grid manipulation |
1: field name, 2: filter value, 3: new data, 4: row ID, 0: final position |
aggrid-imports |
Import statements for AG Grid Angular with theme options |
1: theme name, 2: dark mode option, 0: final position |
aggrid-action-col |
AG Grid action column with edit and delete buttons |
1: header name, 2: field name, 3: width, 4-5: action handlers, 0: final position |
aggrid-quick-filter |
AG Grid quick filter implementation with input binding |
1: placeholder text, 0: final position |
HTML Snippets
| Prefix |
Description |
Tab Stops |
aggrid-html |
Basic AG Grid HTML template with standard configuration |
1-2: dimensions, 3-4: theme options, 5-8: bindings, 0: final position |
aggrid-html-events |
AG Grid HTML with common event bindings |
1-2: dimensions, 3-4: theme options, 5-11: bindings, 0: final position |
aggrid-html-pagination |
AG Grid HTML with pagination enabled |
1-2: dimensions, 3-4: theme options, 5-7: bindings, 8-9: pagination, 0: final position |
aggrid-html-filter |
AG Grid HTML with quick filter input |
1: wrapper class, 2: placeholder, 3: event handler, 4-11: grid options, 0: final position |
aggrid-html-selection |
AG Grid HTML with row selection options |
1-2: dimensions, 3-4: theme options, 5-7: bindings, 8: selection type, 9-10: events, 0: final position |
aggrid-html-server |
AG Grid HTML with server-side row model configuration |
1-2: dimensions, 3-4: theme options, 5-6: bindings, 7-8: cache settings, 0: final position |
aggrid-html-state |
AG Grid HTML with state persistence controls |
1: button wrapper class, 2-3: handlers, 4: template reference, 5-12: grid options, 0: final position |
aggrid-html-export |
AG Grid HTML with export buttons for CSV and Excel |
1: button wrapper class, 2-3: handlers, 4-11: grid options, 0: final position |
CSS Snippets
| Prefix |
Description |
Tab Stops |
aggrid-styles |
Basic AG Grid styles |
1: display type, 2-3: dimensions, 4-5: grid dimensions, 0: final position |
aggrid-cellrenderer-styles |
Cell renderer styles |
1: class name, 2: display type, 3-4: alignment, 5: height, 6-7: padding, 0: final position |
aggrid-custom-cell-styles |
Custom cell styles |
1: cell class, 2-4: layout, 5: height, 6-7: padding, 8: value class, 9-19: button styles, 0: final position |
aggrid-enterprise-styles |
Enterprise theme styles |
1-5: layout, 6: theme name, 7-12: theme variables, 13-15: typography, 0: final position |
aggrid-master-detail-styles |
Master-detail styles |
1-5: layout, 6: theme name, 7-11: detail styles, 0: final position |
aggrid-dark-theme |
Dark theme styles |
1-5: layout, 6: theme name, 7-15: dark theme variables, 16-18: typography, 0: final position |
aggrid-responsive |
Responsive design styles |
1-5: layout, 6-15: media query breakpoints, 0: final position |
aggrid-status-cell-styles |
Status cell styles |
1-19: status indicator styles, 0: final position |
aggrid-tooltip-styles |
Tooltip styles |
1: class name, 2-7: tooltip appearance, 0: final position |
Usage
- Type the snippet prefix (e.g.,
aggrid-basic) in a TypeScript, HTML, or CSS file
- Press
Tab or Enter to insert the snippet
- Use
Tab to navigate through the placeholder values
- Use
Shift+Tab to move backwards through placeholders
- Press
Esc to exit the snippet mode
Requirements
- Visual Studio Code 1.60.0 or higher
- Angular project with AG Grid installed
Installation
- Open VS Code
- Press
Ctrl+P (Windows/Linux) or Cmd+P (Mac)
- Type
ext install ag-grid-angular-snippets
- Press
Enter
Official Resources
Acknowledgments
- AG Grid for their excellent grid component
- Angular team for the amazing framework
- Visual Studio Code for the extensible editor
- All contributors and users of this extension
| |
