{
  "id": "api/elements/createCustomElement",
  "title": "createCustomElement",
  "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            { \"@type\": \"ListItem\", \"position\": 3, \"item\": { \"@id\": \"https://angular.io/api/elements/createCustomElement\", \"name\": \"createCustomElement\" } }\n          ]\n        }\n      </script>\n        <a href=\"/api\">API</a> > <a href=\"api/elements\">@angular/elements</a>\n    </div>\n    <div class=\"github-links\">\n  <a href=\"https://github.com/angular/angular/edit/master/packages/elements/src/create-custom-element.ts?message=docs(elements)%3A%20describe%20your%20change...#L105-L247\" 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/src/create-custom-element.ts#L105-L247\" 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=\"createcustomelement\">createCustomElement<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/elements/createCustomElement#createcustomelement\"><i class=\"material-icons\">link</i></a></h1>\n    \n    <label class=\"api-type-label function\">function</label>\n    \n    \n    \n  </header>\n  \n  <aio-toc class=\"embedded\"></aio-toc>\n\n  <div class=\"api-body\">\n    \n  <section class=\"short-description\">\n    <p>Creates a custom element class based on an Angular component.</p>\n\n    <p><a href=\"api/elements/createCustomElement#description\">See more...</a></p>\n  </section>\n  \n  \n  \n\n  <div class=\"overload-info\">\n  \n\n  <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"> <span class=\"member-name\"><a href=\"api/elements/createCustomElement\" class=\"code-anchor\">createCustomElement</a></span>&#x3C;P>(component: <a href=\"api/core/Type\" class=\"code-anchor\">Type</a>&#x3C;any>, config: <a href=\"api/elements/NgElementConfig\" class=\"code-anchor\">NgElementConfig</a>): <a href=\"api/elements/NgElementConstructor\" class=\"code-anchor\">NgElementConstructor</a>&#x3C;P></code-example>\n\n  \n\n  <h6 class=\"no-anchor\" id=\"parameters\">Parameters</h6>\n  <table class=\"is-full-width list-table parameters-table function-overload-parameters\">\n  <tbody>\n  \n    <tr class=\"function-overload-parameter\">\n      <td class=\"param-name\">\n        <a id=\"\"></a>\n        <code>component</code>\n      </td>\n      <td class=\"param-type\"><code><a href=\"api/core/Type\" class=\"code-anchor\">Type</a><any></any></code></td>\n      <td class=\"param-description\">\n      <p>The component to transform.</p>\n\n      </td>\n    </tr>\n    <tr class=\"function-overload-parameter\">\n      <td class=\"param-name\">\n        <a id=\"\"></a>\n        <code>config</code>\n      </td>\n      <td class=\"param-type\"><code><a href=\"api/elements/NgElementConfig\" class=\"code-anchor\">NgElementConfig</a></code></td>\n      <td class=\"param-description\">\n      <p>A configuration that provides initialization information to the created class.</p>\n\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n  \n  <h6 class=\"no-anchor\" id=\"returns\">Returns</h6>\n  <p><code><a href=\"api/elements/NgElementConstructor\" class=\"code-anchor\">NgElementConstructor&#x3C;P></a></code>: The custom-element construction class, which can be registered with\na browser's <code>CustomElementRegistry</code>.</p>\n\n  \n\n\n  \n\n  \n</div>\n\n\n  \n<section class=\"see-also\">\n  <h2 id=\"see-also\">See also<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/elements/createCustomElement#see-also\"><i class=\"material-icons\">link</i></a></h2>\n  <ul>\n  \n    <li><p><a href=\"guide/elements\" title=\"Turning Angular components into custom elements\">Angular Elements Overview</a></p>\n</li>\n  </ul>\n</section>\n\n\n  \n\n<section class=\"description\">\n  <h2 id=\"description\">Description<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/elements/createCustomElement#description\"><i class=\"material-icons\">link</i></a></h2>\n  <p>Builds a class that encapsulates the functionality of the provided component and\nuses the configuration information to provide more context to the class.\nTakes the component factory's inputs and outputs to convert them to the proper\ncustom element API and add hooks to input changes.</p>\n<p>The configuration's injector is the initial injector set on the class,\nand used by default for each created instance.This behavior can be overridden with the\nstatic property to affect all newly created instances, or as a constructor argument for\none-off creations.</p>\n\n  \n</section>\n\n\n\n  \n\n\n  </div>\n</article>\n\n<!-- links to this doc:\n - api/elements\n - api/elements/NgElementConstructor\n - guide/elements\n-->\n<!-- links from this doc:\n - /api\n - api/core/Type\n - api/elements\n - api/elements/NgElementConfig\n - api/elements/NgElementConstructor\n - api/elements/createCustomElement#createcustomelement\n - api/elements/createCustomElement#description\n - api/elements/createCustomElement#see-also\n - guide/elements\n - https://github.com/angular/angular/edit/master/packages/elements/src/create-custom-element.ts?message=docs(elements)%3A%20describe%20your%20change...#L105-L247\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/elements/src/create-custom-element.ts#L105-L247\n-->"
}