{
  "name": "frameworks/angular",
  "title": "Angular",
  "description": "Tips for using eurodata-ui in your Angular app.",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/frameworks/angular/",
  "sections": [
    {
      "heading": "Angular",
      "markdown": ""
    },
    {
      "heading": "Installation",
      "markdown": "To add eurodata-ui to your Angular app, install the package.\n\n```bash\npnpm add @eurodata/eurodata-ui\n```\n\nNext, add the eurodata-ui stylesheet to your `angular.json` build options.\n\n```json\n\"styles\": [\n  \"src/styles.scss\",\n  \"node_modules/@eurodata/eurodata-ui/dist/styles/eurodata.css\"\n]\n```\n\nThen import the components you need in the relevant module or component file.\n\n```typescript\nimport '@eurodata/eurodata-ui/dist/components/button/button.js';\n```"
    },
    {
      "heading": "Enabling Custom Elements",
      "markdown": "Angular needs to know that `ed-*` elements are valid custom elements. Add `CUSTOM_ELEMENTS_SCHEMA` to any module or standalone component that uses them.\n\n```typescript\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';\n\n@NgModule({\n  schemas: [CUSTOM_ELEMENTS_SCHEMA]\n})\nexport class AppModule {}\n```\n\nFor standalone components, add it directly to the component decorator.\n\n```typescript\nimport { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n  template: `<ed-button variant=\"brand\">Button</ed-button>`\n})\nexport class AppComponent {}\n```"
    },
    {
      "heading": "TypeScript",
      "markdown": "eurodata-ui ships with TypeScript type definitions for every component. You can import the element type directly from its module path.\n\n```typescript\nimport type EdDrawerElement from '@eurodata/eurodata-ui/dist/components/drawer/drawer.js';\nimport '@eurodata/eurodata-ui/dist/components/drawer/drawer.js';\n```\n\nUse `ElementRef` with the component type to get type-safe access to the element's properties.\n\n```typescript\n@ViewChild('drawer')\ndrawer?: ElementRef<EdDrawerElement>;\n\nopenDrawer() {\n  if (this.drawer) this.drawer.nativeElement.open = true;\n}\n```"
    },
    {
      "heading": "Event Handling",
      "markdown": "Many eurodata-ui components emit [native events](https://developer.mozilla.org/en-US/docs/Web/API/Event) such as `input`, `change`, and `click`. Angular binds to these using the standard event binding syntax.\n\n```html\n<ed-input (input)=\"handleInput($event)\"></ed-input>\n```\n\nFor custom events emitted by eurodata-ui (e.g. `ed-show`, `ed-hide`), use the full event name in the binding.\n\n```html\n<ed-drawer (ed-show)=\"onDrawerShow($event)\" (ed-hide)=\"onDrawerHide($event)\">\n  Drawer content\n</ed-drawer>\n```"
    },
    {
      "heading": "Two-Way Binding",
      "markdown": "Angular's `[(ngModel)]` directive does not work with custom elements. Instead, bind the `value` property and listen to the `input` event manually.\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    <ed-input [value]=\"name\" (input)=\"name = $event.target.value\"></ed-input>\n    <p>Hello, !</p>\n  `\n})\nexport class AppComponent {\n  name = '';\n}\n```"
    }
  ]
}