# Angular Integration

Initialize Elements in a browser-only lifecycle hook and inject the component after the view mounts.

## Install

```bash
npm install @liquidcommerce/elements-sdk
```

## Standalone Component Example

```ts
import { AfterViewInit, Component } from '@angular/core';
import { Elements } from '@liquidcommerce/elements-sdk';

@Component({
  selector: 'app-product-page',
  standalone: true,
  template: '<div id="product"></div>'
})
export class ProductPageComponent implements AfterViewInit {
  async ngAfterViewInit() {
    const client = await Elements('YOUR_API_KEY', { env: 'production' });
    await client.injectProductElement([
      { containerId: 'product', identifier: '00619947000020' }
    ]);
  }
}
```

## Notes

- Initialize only in the browser (not during server rendering).

## Related Docs

- [Product Component](../guides/product-component.md)
- [Client API](../api/client.md)