{"id":27880521,"url":"https://github.com/SalathielGenese/ngx-mdx","last_synced_at":"2025-05-05T04:03:12.922Z","repository":{"id":291327792,"uuid":"977292971","full_name":"SalathielGenese/ngx-mdx","owner":"SalathielGenese","description":"Take Angular lifecycle to Markdown, for a seamless experience","archived":false,"fork":false,"pushed_at":"2025-05-03T22:25:34.000Z","size":0,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-03T22:25:51.197Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SalathielGenese.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2025-05-03T21:29:54.000Z","updated_at":"2025-05-03T22:25:37.000Z","dependencies_parsed_at":"2025-05-03T22:38:01.785Z","dependency_job_id":null,"html_url":"https://github.com/SalathielGenese/ngx-mdx","commit_stats":null,"previous_names":["salathielgenese/ngx-mdx"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SalathielGenese%2Fngx-mdx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SalathielGenese%2Fngx-mdx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SalathielGenese%2Fngx-mdx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SalathielGenese%2Fngx-mdx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SalathielGenese","download_url":"https://codeload.github.com/SalathielGenese/ngx-mdx/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252436291,"owners_count":21747470,"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-05-05T04:02:23.303Z","updated_at":"2025-05-05T04:03:12.911Z","avatar_url":"https://github.com/SalathielGenese.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components","Recently Updated"],"sub_categories":["Markdown","[May 05, 2025](/content/2025/05/05/README.md)"],"readme":"# `ngx-mdx`\n\nThe React vibrant ecosystem makes Markdown integration seamless with MDX.\nSo this project is all about bringing a similar experience to Angular,\nwith as less hurdle as we can.\n\n## Usage\n\n### Install\n\n```shell\n# npm install npx-mdx\n# yarn add npx-mdx\npnpm add npx-mdx\n```\n\n### API\n\n`ngx-mdx` exposes:\n\n+ one component:\n  + ```typescript\n    // Component Selectors: ngx-mdx, ngxMdx\n    import {MdxComponent} from \"ngx-mdx\";\n    ```\n+ two directives:\n  + ```typescript\n    // Directive Selectors: [ngx-mdx-ignore], [ngxMdxIgnore]\n    import {MdxIgnoreDirective} from \"ngx-mdx\";\n    \n    // Useful to ignore a DOM tree starting on the node it is applied on.\n    ```\n  + ```typescript\n    // Directive Selectors: [ngx-mdx-inline], [ngxMdxInline]\n    import {MdxIgnoreDirective} from \"ngx-mdx\";\n    ```\n\n### Templating\n\n```angular2html\n\u003c!-- Input --\u003e\n\u003carticle ngx-mdx\u003eHello **world**!\u003c/article\u003e\n\n\u003c!-- Output --\u003e\n\u003carticle\u003e\u003cp\u003eHello \u003cstrong\u003eworld\u003c/strong\u003e!\u003c/p\u003e\u003c/article\u003e\n```\n\nMarkdown in nested DOM:\n```angular2html\n\u003c!-- Input --\u003e\n\u003carticle ngx-mdx\u003eHello \u003ca href=\"#\"\u003edancing **world**\u003c/a\u003e!\u003c/article\u003e\n\n\u003c!-- Output --\u003e\n\u003carticle\u003e\u003cp\u003eHello \u003c/p\u003e\u003ca href=\"#\"\u003e\u003cp\u003edancing \u003cstrong\u003eworld\u003c/strong\u003e\u003c/p\u003e\u003c/a\u003e\u003cp\u003e!\u003c/p\u003e\u003c/article\u003e\n```\n\n\u003e **NOTE:** You may have noticed those extract `\u003cp\u003e` tags.\n\u003e You can inline the rendering and rid of them...\n\u003e\n\u003e It works on ngx-mdx hosts:\n\u003e ```angular2html\n\u003e \u003c!-- Input --\u003e\n\u003e \u003carticle ngx-mdx ngx-mdx-inline\u003eHello **world**!\u003c/article\u003e\n\u003e\n\u003e \u003c!-- Output --\u003e\n\u003e \u003carticle\u003eHello \u003cstrong\u003eworld\u003c/strong\u003e!\u003c/article\u003e\n\u003e ```\n\u003e\n\u003e\n\u003e But also when Markdown in nested DOM:\n\u003e ```angular2html\n\u003e \u003c!-- Input --\u003e\n\u003e \u003carticle ngx-mdx\u003eHello \u003ca href=\"#\" ngx-mdx-inline\u003edancing **world**\u003c/a\u003e!\u003c/article\u003e\n\u003e\n\u003e \u003c!-- Output --\u003e\n\u003e \u003carticle\u003e\u003cp\u003eHello \u003c/p\u003e\u003ca href=\"#\"\u003edancing \u003cstrong\u003eworld\u003c/strong\u003e\u003c/a\u003e\u003cp\u003e!\u003c/p\u003e\u003c/article\u003e\n\u003e ```\n\n\n## Licencing\n\nThis project is delivered under MIT Licence.\n\n## Contributing\n\nYou are encouraged to:\n\n+ Open issues, with your Angular/ngx-mdx versions\n+ Fork this repository and submit feature requests\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSalathielGenese%2Fngx-mdx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSalathielGenese%2Fngx-mdx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSalathielGenese%2Fngx-mdx/lists"}