{"id":26788198,"url":"https://github.com/keycloakify/angular-email","last_synced_at":"2025-04-19T20:46:06.761Z","repository":{"id":275580774,"uuid":"926512026","full_name":"keycloakify/angular-email","owner":"keycloakify","description":"Angular email builder","archived":false,"fork":false,"pushed_at":"2025-04-03T08:36:48.000Z","size":1265,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-03T09:32:39.534Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/keycloakify.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-03T11:43:24.000Z","updated_at":"2025-04-03T08:36:52.000Z","dependencies_parsed_at":"2025-03-25T11:22:08.666Z","dependency_job_id":"a48dc4f2-46cf-4672-adb6-b57e59a5da25","html_url":"https://github.com/keycloakify/angular-email","commit_stats":null,"previous_names":["luca-peruzzo/angular-email","keycloakify/angular-email"],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keycloakify%2Fangular-email","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keycloakify%2Fangular-email/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keycloakify%2Fangular-email/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keycloakify%2Fangular-email/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/keycloakify","download_url":"https://codeload.github.com/keycloakify/angular-email/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249796095,"owners_count":21326780,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-29T13:14:29.055Z","updated_at":"2025-04-19T20:46:06.752Z","avatar_url":"https://github.com/keycloakify.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Email\n\nAngular Email is a library that enables email template development using Angular, inspired by [jsx-email](https://github.com/shellscape/jsx-email). It provides a way to create email components using Angular's templating system.\n\n## Installation\n\nTo install Angular Email, use npm or yarn:\n\n```sh\nnpm install @keycloakify/angular-email\n# or\nyarn add @keycloakify/angular-email\n```\n\n## Usage\n\n### Creating an Email Component\n\nsee this [example](https://github.com/keycloakify/angular-email/blob/main/projects/showcase/src/app/app.component.ts)\n\n### Rendering the Email\n\nTo render the email as HTML or plaintext, use Angular's rendering engine:\n\n```typescript\n// email.component.ts\n...\nimport { render, RenderToHtml } from '@keycloakify/angular-email';\n\n...\nexport class EmailComponent {\n  ....\n}\n\ntype EmailComponentProps = {};\n\nexport const renderToHtml: RenderToHtml\u003cEmailComponentProps\u003e = (props) =\u003e {\n  return render({\n    component: EmailComponent,\n    selector: 'app-root',\n    props,\n    options: {\n      pretty: true,\n    },\n  });\n};\n```\n\n```sh\n# cmd\n\nexport $EMAIL_COMPONENTS_DIR_PATH=\"src/emails\"\nnpx keycloakify-angular-email build -p $EMAIL_COMPONENTS_DIR_PATH\n```\n\nNB: use `keycloakify-angular-email build` when you don't need to pass dynamic inputs to your components, otherwise see [Standalone Dynamic Rendering](#standalone-dynamic-rendering)\n\n### With Keycloakify Emails\n\n```ts\n// email.component.ts\n...\nimport { render } from '@keycloakify/angular-email';\nimport type { GetSubject, GetTemplate } from 'keycloakify-emails';\n\n...\nexport class EmailComponent {\n  ....\n}\n\nexport const getTemplate: GetTemplate = async (props) =\u003e {\n  return await render({\n    component: EmailComponent,\n    props,\n    selector: 'kc-email-test',\n    options: {\n      signalInputsPrefix: '$',\n      pretty: true,\n      plainText: props.plainText,\n    },\n  });\n};\n\nexport const getSubject: GetSubject = async (_props) =\u003e {\n  return '[KEYCLOAK] - SMTP test message';\n};\n```\n\n```ts\n// vite.config.ts\n\n...\nimport { buildEmailTheme } from 'keycloakify-emails';\nimport { angularEsbuildPlugin } from '@keycloakify/angular-email/esbuild';\n\nexport default defineConfig(({ mode }) =\u003e ({\n  ...\n  plugins: [\n    angular(),\n    keycloakify({\n      ...\n      postBuild: async (buildContext) =\u003e {\n        await buildEmailTheme({\n          templatesSrcDirPath: join(import.meta.dirname, '/emails/templates'),\n          filterTemplate: (filePath: string) =\u003e !!filePath.endsWith('.component.ts'),\n          themeNames: buildContext.themeNames,\n          keycloakifyBuildDirPath: buildContext.keycloakifyBuildDirPath,\n          locales: ['en'],\n          cwd: import.meta.dirname,\n          esbuild: {\n            packages: 'bundle',\n            external: ['juice', 'postcss', 'tailwindcss-v3'],\n            format: 'esm',\n            outExtension: { '.js': '.mjs' },\n            plugins: [angularEsbuildPlugin(import.meta.dirname)],\n          },\n        });\n      },\n    }),\n  ],\n}));\n```\n\n### Standalone Dynamic Rendering\n\nUse it in a server environment\n\n```js\n// index.mjs\n\nimport { toHTML } from '@keycloakify/angular-email/node';\n\ntoHTML({\n  filePath: 'path/to/your.component.ts',\n  props: { foo: 'bar' },\n})\n  .then((html) =\u003e {\n    console.log(html);\n  })\n  .catch((e) =\u003e {\n    console.error(e);\n  });\n```\n\nor\n\n```js\n// index.cjs\n\nconst { toHTML } = require('@keycloakify/angular-email/node');\n\ntoHTML({\n  filePath: 'path/to/your.component.ts',\n  props: { foo: 'bar' },\n})\n  .then((html) =\u003e {\n    console.log(html);\n  })\n  .catch((e) =\u003e {\n    console.error(e);\n  });\n```\n\n```sh\n# cmd\n\nnode index.mjs # or node index.cjs\n```\n\n## API\n\n### @keycloakify/angular-email\n\n### Render\n\n```ts\ntype Render\u003cInput extends Record\u003cstring, any\u003e\u003e = {\n  component: Type\u003cunknown\u003e;\n  /** Component selector */\n  selector: string;\n  /** Component inputs */\n  props?: Input;\n  options?: {\n    /** render as text */\n    plainText?: boolean;\n    /** format the html output */\n    pretty?: boolean;\n    /** tailwind v3 configuration object */\n    tailwindConfig?: Partial\u003cConfig\u003e;\n    /** if you use prefix conventions on signal inputs */\n    signalInputsPrefix?: string;\n  };\n};\n```\n\n### render()\n\n```ts\nrender\u003cInput extends Record\u003cstring, any\u003e\u003e({ component, selector, props, options }: Render\u003cInput\u003e) =\u003e Promise\u003cstring\u003e\n```\n\n### @keycloakify/angular-email/esbuild\n\n### angularEsbuildPlugin()\n\n```ts\nangularEsbuildPlugin(cwd: string) =\u003e Plugin\n```\n\n### @keycloakify/angular-email/node\n\n### toHTML()\n\n```ts\ntoHTML\u003cInput extends Record\u003cstring, any\u003e\u003e(options: {\n    filePath: string;\n    props?: Input;\n    root?: string;\n}) =\u003e Promise\u003cstring\u003e\n```\n\n### @keycloakify/angular-email/tailwindcss-preset-email\n\nJust a tailwind v3 preset, inspired by [@maizzle/tailwindcss-preset-email](https://github.com/maizzle/tailwindcss-preset-email)\n\n**NB**: tailwind v4 is not supported due to high level css generation and poor support in overriding default utilities\n\n[add support for disabling core plugins](https://github.com/tailwindlabs/tailwindcss/discussions/16132)\n\n[Cannot override tailwind utilities](https://github.com/tailwindlabs/tailwindcss/issues/16856)\n\n## Contributing\n\nContributions are welcome! Feel free to open an issue or submit a pull request on [GitHub](https://github.com/keycloakify/angular-email).\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n\n## Acknowledgments\n\n- Inspired by [jsx-email](https://github.com/rezqio/jsx-email)\n- Developed by [Luca Peruzzo](https://github.com/luca-peruzzo)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeycloakify%2Fangular-email","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkeycloakify%2Fangular-email","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeycloakify%2Fangular-email/lists"}