{
  "id": "api/core/Host",
  "title": "Host",
  "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/core\", \"name\": \"@angular/core\" } },\n            { \"@type\": \"ListItem\", \"position\": 3, \"item\": { \"@id\": \"https://angular.io/api/core/Host\", \"name\": \"Host\" } }\n          ]\n        }\n      </script>\n        <a href=\"/api\">API</a> > <a href=\"api/core\">@angular/core</a>\n    </div>\n    <div class=\"github-links\">\n  <a href=\"https://github.com/angular/angular/edit/master/packages/core/src/di/metadata.ts?message=docs(core)%3A%20describe%20your%20change...#L245-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/core/src/di/metadata.ts#L245-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=\"host\">Host<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/core/Host#host\"><i class=\"material-icons\">link</i></a></h1>\n    \n    <label class=\"api-type-label decorator\">decorator</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>Parameter decorator on a view-provider parameter of a class constructor\nthat tells the DI framework to resolve the view by checking injectors of child\nelements, and stop when reaching the host element of the current component.</p>\n\n    \n  </section>\n  \n  \n  \n\n\n\n  \n\n  \n\n\n<section class=\"decorator-options\">\n  <h2 id=\"options\">Options<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/core/Host#options\"><i class=\"material-icons\">link</i></a></h2>\n  \n</section>\n\n  \n<section class=\"usage-notes\">\n  <h2 id=\"usage-notes\">Usage notes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/core/Host#usage-notes\"><i class=\"material-icons\">link</i></a></h2>\n  <p>The following shows use with the <code>@<a href=\"api/core/Optional\" class=\"code-anchor\">Optional</a></code> decorator, and allows for a <code>null</code> result.</p>\n<code-example path=\"core/di/ts/metadata_spec.ts\" region=\"Host\">\nclass OtherService {}\nclass HostService {}\n\n@<a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a>({selector: 'child-directive'})\nclass ChildDirective {\n  logs: string[] = [];\n\n  constructor(@<a href=\"api/core/Optional\" class=\"code-anchor\">Optional</a>() @<a href=\"api/core/Host\" class=\"code-anchor\">Host</a>() os: OtherService, @<a href=\"api/core/Optional\" class=\"code-anchor\">Optional</a>() @<a href=\"api/core/Host\" class=\"code-anchor\">Host</a>() hs: HostService) {\n    // os is null: true\n    this.logs.push(`os is null: ${os === null}`);\n    // hs is an instance of HostService: true\n    this.logs.push(`hs is an instance of HostService: ${hs instanceof HostService}`);\n  }\n}\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n  selector: 'parent-cmp',\n  viewProviders: [HostService],\n  template: '&#x3C;child-directive>&#x3C;/child-directive>',\n})\nclass ParentCmp {\n}\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n  selector: 'app',\n  viewProviders: [OtherService],\n  template: '&#x3C;parent-cmp>&#x3C;/parent-cmp>',\n})\nclass App {\n}\n\n</code-example>\n<p>For an extended example, see <a href=\"guide/dependency-injection-in-action#optional\">\"Dependency Injection\nGuide\"</a>.</p>\n\n</section>\n\n\n\n  </div>\n</article>\n\n<!-- links to this doc:\n - api/core\n - api/core/InjectFlags\n - guide/dependency-injection-in-action\n - guide/hierarchical-dependency-injection\n - guide/ivy-compatibility\n - guide/using-libraries\n-->\n<!-- links from this doc:\n - /api\n - api/core\n - api/core/Component\n - api/core/Directive\n - api/core/Host#host\n - api/core/Host#options\n - api/core/Host#usage-notes\n - api/core/Optional\n - guide/dependency-injection-in-action#optional\n - https://github.com/angular/angular/edit/master/packages/core/src/di/metadata.ts?message=docs(core)%3A%20describe%20your%20change...#L245-L247\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/core/src/di/metadata.ts#L245-L247\n-->"
}