5 lines
8.8 KiB
JSON
5 lines
8.8 KiB
JSON
{
|
|
"id": "api/elements",
|
|
"title": "@angular/elements",
|
|
"contents": "\n\n<article>\n <div class=\"breadcrumb-container\">\n <div class=\"breadcrumb\">\n <script type=\"application/ld+json\">\n {\n \"@context\": \"http://schema.org\",\n \"@type\": \"BreadcrumbList\",\n \"itemListElement\": [\n { \"@type\": \"ListItem\", \"position\": 1, \"item\": { \"@id\": \"https://angular.io//api\", \"name\": \"API\" } },\n { \"@type\": \"ListItem\", \"position\": 2, \"item\": { \"@id\": \"https://angular.io/api/elements\", \"name\": \"@angular/elements\" } }\n ]\n }\n </script>\n <a href=\"/api\">API</a>\n </div>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/elements/PACKAGE.md?message=docs(...)%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/elements/PACKAGE.md\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n \n<header class=\"api-header\">\n <h1 id=\"angularelements\">@angular/elements<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/elements#angularelements\"><i class=\"material-icons\">link</i></a></h1>\n <label class=\"api-type-label package\">package</label>\n \n \n \n</header>\n\n <aio-toc class=\"embedded\"></aio-toc>\n\n <div class=\"api-body\">\n <p>Implements Angular's custom-element API, which enables you to package components as\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements\">custom elements</a>.</p>\n\n <p>A custom element extends HTML by allowing you to define a tag whose content is created and controlled by JavaScript code. The browser maintains a <code>CustomElementRegistry</code> of defined custom elements (also called Web Components), which maps an instantiable JavaScript class to an HTML tag.</p>\n<p>The <code><a href=\"api/elements/createCustomElement\" class=\"code-anchor\">createCustomElement</a>()</code> function provides a bridge from Angular's component interface and change detection functionality to the built-in DOM API. </p>\n<p>For more information, see <a href=\"guide/elements\">Angular Elements Overview</a>.</p>\n\n\n \n\n\n \n <h2 id=\"entry-points\">Entry points<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/elements#entry-points\"><i class=\"material-icons\">link</i></a></h2>\n \n \n \n <section class=\"export-list\">\n <h3 id=\"primary\">Primary<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/elements#primary\"><i class=\"material-icons\">link</i></a></h3>\n <table class=\"is-full-width list-table\">\n \n <tbody><tr>\n <td><code class=\"code-anchor\"><a href=\"api/elements#primary-entry-point-exports\">@angular/elements</a></code></td>\n <td>\n \n <p>Implements Angular's custom-element API, which enables you to package components as\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements\">custom elements</a>.</p>\n\n </td>\n </tr>\n \n </tbody></table>\n </section>\n \n\n \n \n \n\n \n\n <h2 id=\"primary-entry-point-exports\">Primary entry point exports<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/elements#primary-entry-point-exports\"><i class=\"material-icons\">link</i></a></h2>\n \n \n \n \n \n\n \n \n \n <section class=\"export-list\">\n <h3 id=\"classes\">Classes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/elements#classes\"><i class=\"material-icons\">link</i></a></h3>\n <table class=\"is-full-width list-table\">\n \n <tbody><tr>\n <td><code class=\"code-anchor\"><a href=\"api/elements/NgElement\">NgElement</a></code></td>\n <td>\n \n <p>Implements the functionality needed for a custom element.</p>\n\n </td>\n </tr>\n \n </tbody></table>\n </section>\n \n\n \n \n \n\n \n \n \n <section class=\"export-list\">\n <h3 id=\"functions\">Functions<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/elements#functions\"><i class=\"material-icons\">link</i></a></h3>\n <table class=\"is-full-width list-table\">\n \n <tbody><tr>\n <td><code class=\"code-anchor\"><a href=\"api/elements/createCustomElement\">createCustomElement</a></code></td>\n <td>\n \n <p>Creates a custom element class based on an Angular component.</p>\n\n </td>\n </tr>\n \n </tbody></table>\n </section>\n \n\n \n \n \n <section class=\"export-list\">\n <h3 id=\"structures\">Structures<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/elements#structures\"><i class=\"material-icons\">link</i></a></h3>\n <table class=\"is-full-width list-table\">\n \n <tbody><tr>\n <td><code class=\"code-anchor\"><a href=\"api/elements/NgElementConfig\">NgElementConfig</a></code></td>\n <td>\n \n <p>A configuration that initializes an NgElementConstructor with the\ndependencies and strategy it needs to transform a component into\na custom element class.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/elements/NgElementConstructor\">NgElementConstructor</a></code></td>\n <td>\n \n <p>Prototype for a class constructor based on an Angular component\nthat can be used for custom element registration. Implemented and returned\nby the <a href=\"api/elements/createCustomElement\">createCustomElement() function</a>.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/elements/NgElementStrategy\">NgElementStrategy</a></code></td>\n <td>\n \n <p>Underlying strategy used by the NgElement to create/destroy the component and react to input\nchanges.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/elements/NgElementStrategyEvent\">NgElementStrategyEvent</a></code></td>\n <td>\n \n <p>Interface for the events emitted through the NgElementStrategy.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/elements/NgElementStrategyFactory\">NgElementStrategyFactory</a></code></td>\n <td>\n \n <p>Factory used to create new strategies for each NgElement instance.</p>\n\n </td>\n </tr>\n \n </tbody></table>\n </section>\n \n\n \n \n \n\n \n \n \n\n \n \n \n <section class=\"export-list\">\n <h3 id=\"types\">Types<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/elements#types\"><i class=\"material-icons\">link</i></a></h3>\n <table class=\"is-full-width list-table\">\n \n <tbody><tr>\n <td><code class=\"code-anchor\"><a href=\"api/elements/WithProperties\">WithProperties</a></code></td>\n <td>\n \n <p>Additional type information that can be added to the NgElement class,\nfor properties that are added based\non the inputs and methods of the underlying component.</p>\n\n </td>\n </tr>\n \n </tbody></table>\n </section>\n \n\n </div>\n</article>\n\n<!-- links to this doc:\n - api/elements/NgElement\n - api/elements/NgElementConfig\n - api/elements/NgElementConstructor\n - api/elements/NgElementStrategy\n - api/elements/NgElementStrategyEvent\n - api/elements/NgElementStrategyFactory\n - api/elements/WithProperties\n - api/elements/createCustomElement\n-->\n<!-- links from this doc:\n - /api\n - api/elements#angularelements\n - api/elements#classes\n - api/elements#entry-points\n - api/elements#functions\n - api/elements#primary\n - api/elements#primary-entry-point-exports\n - api/elements#structures\n - api/elements#types\n - api/elements/NgElement\n - api/elements/NgElementConfig\n - api/elements/NgElementConstructor\n - api/elements/NgElementStrategy\n - api/elements/NgElementStrategyEvent\n - api/elements/NgElementStrategyFactory\n - api/elements/WithProperties\n - api/elements/createCustomElement\n - guide/elements\n - https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements\n - https://github.com/angular/angular/edit/master/packages/elements/PACKAGE.md?message=docs(...)%3A%20describe%20your%20change...\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/elements/PACKAGE.md\n-->"
|
|
} |