5 lines
14 KiB
JSON
5 lines
14 KiB
JSON
{
|
|
"id": "guide/component-overview",
|
|
"title": "Angular Components Overview",
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/component-overview.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</div>\n\n\n<div class=\"content\">\n <h1 id=\"angular-components-overview\">Angular Components Overview<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-overview#angular-components-overview\"><i class=\"material-icons\">link</i></a></h1>\n<p>Components are the main building block for Angular applications. Each component consists of:</p>\n<ul>\n<li>An HTML template that declares what renders on the page</li>\n<li>A Typescript class that defines behavior</li>\n<li>A CSS selector that defines how the component is used in a template</li>\n<li>Optionally, CSS styles applied to the template</li>\n</ul>\n<p>This topic describes how to create and configure an Angular component.</p>\n<div class=\"alert is-helpful\">\n<p>To view or download the example code used in this topic, see the <live-example></live-example>.</p>\n</div>\n<h2 id=\"prerequisites\">Prerequisites<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-overview#prerequisites\"><i class=\"material-icons\">link</i></a></h2>\n<p>To create a component, verify that you have met the following prerequisites:</p>\n<ol>\n<li><a href=\"guide/setup-local#install-the-angular-cli\">Install the Angular CLI.</a></li>\n<li><a href=\"guide/setup-local#create-a-workspace-and-initial-application\">Create an Angular workspace</a> with initial application.\nIf you don't have a project, you can create one using <code>ng new <project-name></code>, where <code><project-name></code> is the name of your Angular application.</li>\n</ol>\n<h2 id=\"creating-a-component\">Creating a component<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-overview#creating-a-component\"><i class=\"material-icons\">link</i></a></h2>\n<p>The easiest way to create a component is with the Angular CLI. You can also create a component manually.</p>\n<h3 id=\"creating-a-component-using-the-angular-cli\">Creating a component using the Angular CLI<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-overview#creating-a-component-using-the-angular-cli\"><i class=\"material-icons\">link</i></a></h3>\n<p>To create a component using the Angular CLI:</p>\n<ol>\n<li>From a terminal window, navigate to the directory containing your application.</li>\n<li>Run the <code>ng generate component <component-name></code> command, where <code><component-name></code> is the name of your new component.</li>\n</ol>\n<p>By default, this command creates the following:</p>\n<ul>\n<li>A folder named after the component</li>\n<li>A component file, <code><component-name>.component.ts</code></li>\n<li>A template file, <code><component-name>.component.html</code></li>\n<li>A CSS file, <code><component-name>.component.css</code></li>\n<li>A testing specification file, <code><component-name>.component.spec.ts</code></li>\n</ul>\n<p>Where <code><component-name></code> is the name of your component.</p>\n<div class=\"alert is-helpful\">\n<p>You can change how <code>ng generate component</code> creates new components.\nFor more information, see <a href=\"cli/generate#component-command\">ng generate component</a> in the Angular CLI documentation.</p>\n</div>\n<h3 id=\"creating-a-component-manually\">Creating a component manually<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-overview#creating-a-component-manually\"><i class=\"material-icons\">link</i></a></h3>\n<p>Although the Angular CLI is the easiest way to create an Angular component, you can also create a component manually.\nThis section describes how to create the core component file within an existing Angular project.</p>\n<p>To create a new component manually:</p>\n<ol>\n<li>\n<p>Navigate to your Angular project directory.</p>\n</li>\n<li>\n<p>Create a new file, <code><component-name>.component.ts</code>.</p>\n</li>\n<li>\n<p>At the top of the file, add the following import statement.</p>\n<code-example path=\"component-overview/src/app/component-overview/component-overview.component.ts\" region=\"import\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a> } from '@angular/core';\n\n</code-example>\n</li>\n<li>\n<p>After the <code>import</code> statement, add a <code>@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a></code> decorator.</p>\n<code-example path=\"component-overview/src/app/component-overview/component-overview.component.ts\" region=\"decorator-skeleton\">\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n})\n\n</code-example>\n</li>\n<li>\n<p>Choose a CSS selector for the component.</p>\n<code-example path=\"component-overview/src/app/component-overview/component-overview.component.ts\" region=\"selector\">\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-component-overview',\n})\n\n</code-example>\n<p>For more information on choosing a selector, see <a href=\"guide/component-overview#specifying-a-components-css-selector\">Specifying a component's selector</a>.</p>\n</li>\n<li>\n<p>Define the HTML template that the component uses to display information.\nIn most cases, this template is a separate HTML file.</p>\n<code-example path=\"component-overview/src/app/component-overview/component-overview.component.ts\" region=\"templateUrl\">\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-component-overview',\n templateUrl: './component-overview.component.html',\n})\n\n</code-example>\n<p>For more information on defining a component's template, see <a href=\"guide/component-overview#defining-a-components-template\">Defining a component's template</a>.</p>\n</li>\n<li>\n<p>Select the styles for the component's template.\nIn most cases, you define the styles for your component's template in a separate file.</p>\n<code-example path=\"component-overview/src/app/component-overview/component-overview.component.ts\" region=\"decorator\">\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-component-overview',\n templateUrl: './component-overview.component.html',\n styleUrls: ['./component-overview.component.css']\n})\n\n</code-example>\n</li>\n<li>\n<p>Add a <code>class</code> statement that includes the code for the component.</p>\n<code-example path=\"component-overview/src/app/component-overview/component-overview.component.ts\" region=\"class\">\nexport class ComponentOverviewComponent {\n\n}\n\n</code-example>\n</li>\n</ol>\n<h2 id=\"specifying-a-components-css-selector\">Specifying a component's CSS selector<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-overview#specifying-a-components-css-selector\"><i class=\"material-icons\">link</i></a></h2>\n<p>Every component requires a CSS <em>selector</em>. A selector instructs Angular to instantiate this component wherever it finds the corresponding tag in template HTML. For example, consider a component <code>hello-world.component.ts</code> that defines its selector as <code>app-hello-world</code>. This selector instructs Angular to instantiate this component any time the tag <code><app-hello-world></code> appears in a template.</p>\n<p>Specify a component's selector by adding a <code>selector</code> statement to the <code>@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a></code> decorator.</p>\n<code-example path=\"component-overview/src/app/component-overview/component-overview.component.ts\" region=\"selector\">\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-component-overview',\n})\n\n</code-example>\n<h2 id=\"defining-a-components-template\">Defining a component's template<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-overview#defining-a-components-template\"><i class=\"material-icons\">link</i></a></h2>\n<p>A template is a block of HTML that tells Angular how to render the component in your application.\nYou can define a template for your component in one of two ways: by referencing an external file, or directly within the component.</p>\n<p>To define a template as an external file, add a <code>templateUrl</code> property to the <code>@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a></code> decorator.</p>\n<code-example path=\"component-overview/src/app/component-overview/component-overview.component.ts\" region=\"templateUrl\">\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-component-overview',\n templateUrl: './component-overview.component.html',\n})\n\n</code-example>\n<p>To define a template within the component, add a <code>template</code> property to the <code>@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a></code> decorator that contains the HTML you want to use.</p>\n<code-example path=\"component-overview/src/app/component-overview/component-overview.component.1.ts\" region=\"template\">\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-component-overview',\n template: '<h1>Hello World!</h1>',\n})\n\n</code-example>\n<p>If you want your template to span multiple lines, you can use backticks (<code> ` </code>).\nFor example:</p>\n<code-example path=\"component-overview/src/app/component-overview/component-overview.component.2.ts\" region=\"templatebacktick\">\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-component-overview',\n template: `<h1>Hello World!</h1>\n <p>This template definition spans\n <a href=\"api/forms/SelectMultipleControlValueAccessor\" class=\"code-anchor\">multiple</a> lines.</p>`\n})\n\n</code-example>\n<div class=\"alert is-helpful\">\n<p>An Angular component requires a template defined using <code>template</code> or <code>templateUrl</code>. You cannot have both statements in a component.</p>\n</div>\n<h2 id=\"declaring-a-components-styles\">Declaring a component's styles<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-overview#declaring-a-components-styles\"><i class=\"material-icons\">link</i></a></h2>\n<p>You can declare component styles uses for its template in one of two ways: by referencing an external file, or directly within the component.</p>\n<p>To declare the styles for a component in a separate file, add a <code>styleUrls</code> property to the <code>@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a></code> decorator.</p>\n<code-example path=\"component-overview/src/app/component-overview/component-overview.component.ts\" region=\"decorator\">\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-component-overview',\n templateUrl: './component-overview.component.html',\n styleUrls: ['./component-overview.component.css']\n})\n\n</code-example>\n<p>To declare the styles within the component, add a <code>styles</code> property to the <code>@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a></code> decorator that contains the styles you want to use.</p>\n<code-example path=\"component-overview/src/app/component-overview/component-overview.component.3.ts\" region=\"styles\">\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-component-overview',\n template: '<h1>Hello World!</h1>',\n styles: ['h1 { font-weight: normal; }']\n})\n\n</code-example>\n<p>The <code>styles</code> property takes an array of strings that contain the CSS rule declarations.</p>\n<h2 id=\"next-steps\">Next steps<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-overview#next-steps\"><i class=\"material-icons\">link</i></a></h2>\n<ul>\n<li>For an architectural overview of components, see <a href=\"guide/architecture-components\">Introduction to components and templates</a>.</li>\n<li>For additional options you can use when creating a component, see <a href=\"api/core/Component\">Component</a> in the API Reference.</li>\n<li>For more information on styling components, see <a href=\"guide/component-styles\">Component styles</a>.</li>\n<li>For more information on templates, see <a href=\"guide/template-syntax\">Template syntax</a>.</li>\n</ul>\n\n <div class=\"reviewed\">Last reviewed on Thu Mar 18 2021</div>\n</div>\n\n<!-- links to this doc:\n - errors/NG0300\n - guide/built-in-directives\n - guide/what-is-angular\n - start/start-deployment\n-->\n<!-- links from this doc:\n - api/core/Component\n - api/forms/SelectMultipleControlValueAccessor\n - cli/generate#component-command\n - guide/architecture-components\n - guide/component-overview#angular-components-overview\n - guide/component-overview#creating-a-component\n - guide/component-overview#creating-a-component-manually\n - guide/component-overview#creating-a-component-using-the-angular-cli\n - guide/component-overview#declaring-a-components-styles\n - guide/component-overview#defining-a-components-template\n - guide/component-overview#next-steps\n - guide/component-overview#prerequisites\n - guide/component-overview#specifying-a-components-css-selector\n - guide/component-styles\n - guide/setup-local#create-a-workspace-and-initial-application\n - guide/setup-local#install-the-angular-cli\n - guide/template-syntax\n - https://github.com/angular/angular/edit/master/aio/content/guide/component-overview.md?message=docs%3A%20describe%20your%20change...\n-->"
|
|
} |