> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.knapsack.cloud/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.knapsack.cloud/_mcp/server.

# Angular

Knapsack for Angular works by scanning your specified Angular code locations and automatically discovering reusable components, making them instantly available in your design system.

**Why This Approach:**

* ⚡ **Zero Manual Work** - Knapsack finds and configures your components automatically
* 🔄 **Always Current** - Your documentation stays in sync with code changes
* 🎯 **Intelligent** - Understands different export patterns and component structures
* 🚀 **Scale Effortlessly** - Handle hundreds of components without individual setup

***

## Requirements

* **Angular 17 or later** - The Angular renderer requires Angular 17+ and will exit with an error if an older version is detected
* **Built packages** - Components must be built into packages using ng-packagr
* **Package paths only** - Local TypeScript files are not supported

**Important:** The Angular renderer only supports built packages created with ng-packagr. Local TypeScript files are not supported. Ensure your Angular components are built into proper packages before using them with Knapsack.

***

## Install

```bash
npm install @knapsack/renderer-angular
```

## Configure

**Minimal Setup**

The simplest configuration requires specifying your Angular package:

```js
// knapsack.config.js
const { KnapsackAngularRenderer } = require('@knapsack/renderer-angular');

module.exports = configureKnapsack({
  templateRenderers: [
    new KnapsackAngularRenderer({
      codeSrcs: [{ path: '@my-org/angular-components' }],
    }),
  ],
});
```

**Full Configuration Example**

Here's a comprehensive example showing all available options:

```js
// knapsack.config.js
const { KnapsackAngularRenderer } = require('@knapsack/renderer-angular');
const path = require('path');

module.exports = configureKnapsack({
  templateRenderers: [
    new KnapsackAngularRenderer({
      // Optional: your own NgModule to provide providers/imports used by demos
      customNgModulePath: './knapsack/knapsack.module.ts',

      // Optional: a wrapper component that surrounds every template
      wrapperComponentPath: './knapsack/knapsack-wrapper.component.ts',

      // Optional: helpful path aliases for monorepos
      pkgPathAliases: {
        '@shared': path.resolve(__dirname, 'libs/shared/src'),
        '@ui': path.resolve(__dirname, 'libs/ui/src'),
      },

      // Where to discover Angular components (package paths only)
      codeSrcs: [
        // Built Angular packages
        { path: '@my-org/angular-components' },
        { path: '@angular/material' },

        // Local built packages
        { path: './dist/my-components' },
      ],
    }),
  ],
});
```

### Code Sources

The `codeSrcs` array tells Knapsack where to find your Angular components. **Only package paths are supported** - the renderer will scan these packages and make Angular components available in the Knapsack UI.

##### Built Packages

```js
codeSrcs: [
  // External Angular packages
  { path: '@angular/material' },
  { path: '@my-org/angular-design-system' },

  // Local built packages
  { path: './dist/my-components' },
  { path: './libs/ui/dist' },
];
```

##### Package Sub-paths

```js
codeSrcs: [
  // Specific sub-paths within packages
  { path: '@angular/material/button' },
  { path: '@angular/material/card' },
  { path: '@my-org/design-system/components/button' },
];
```

##### Smart Filtering

Use filters to control exactly which components are discovered:

```js
codeSrcs: [
  {
    path: '@angular/material/*',
    filter: (filePath) => {
      // Exclude non-component or internal Angular Material entries
      const excludedPaths = [
        '@angular/material/index',
        '@angular/material/testing',
        '/experimental',
        '/schematics',
      ];
      return !excludedPaths.some((excluded) => filePath.includes(excluded));
    },
  },
];
```

***

### Custom NgModule Path

The `customNgModulePath` configuration option specifies the path to a custom Angular module that is imported into Knapsack alongside the main renderer application.

**1. Create a Custom Module:**

Create a file (e.g., `ks.module.ts`):

```ts
// Note: Providers from the `BrowserModule` have already been loaded.
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ButtonModule } from 'primeng/button';

@NgModule({
  declarations: [],
  imports: [CommonModule, RouterOutlet, ButtonModule],
  exports: [],
})
// ensure the module is the default export
export default class KsModule {}
```

**2. Add your Module Path**

Reference your module in the renderer configuration:

```js
module.exports = configureKnapsack({
  templateRenderers: [
    new KnapsackAngularRenderer({
      customNgModulePath: './ks.module.ts',
    }),
  ],
});
```

***

### Package Path Aliases

The `pkgPathAliases` configuration provides path aliases for monorepo packages:

```js
module.exports = configureKnapsack({
  templateRenderers: [
    new KnapsackAngularRenderer({
      pkgPathAliases: {
        '@my-org/my-ds': path.resolve(__dirname, '../../dist/of/lib/'),
        '@shared': path.resolve(__dirname, '../shared-components/src'),
      },
    }),
  ],
});
```

***

### Wrapper Component

The `wrapperComponentPath` configuration option specifies the path to a custom component that wraps all of your Angular component demos.

**1. Create a Wrapper Component:**

Create a file (e.g., `demo-wrapper.component.ts`):

```ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-wrapper',
  template: `
    <div class="demo-wrapper">
      <div class="demo-wrapper__content">
        <ng-content></ng-content>
      </div>
    </div>
  `,
  styles: [
    `
      .demo-wrapper {
        padding: 1rem;
        border-radius: 4px;
        margin: 1rem 0;
      }

      .demo-wrapper__content {
        min-height: 50px;
      }
    `,
  ],
  // must be a standalone component
  standalone: true,
})
// ensure the module is the default export
export default class WrapperComponent {}
```

**2. Add your Wrapper Path**

Reference your wrapper in the renderer configuration:

```js
module.exports = configureKnapsack({
  templateRenderers: [
    new KnapsackAngularRenderer({
      wrapperComponentPath: './demo-wrapper.component.ts',
    }),
  ],
});
```