{ "id": "guide/component-overview", "title": "Angular Components Overview", "contents": "\n\n\n
Components are the main building block for Angular applications. Each component consists of:
\nThis topic describes how to create and configure an Angular component.
\nTo view or download the example code used in this topic, see the
To create a component, verify that you have met the following prerequisites:
\nng new <project-name>
, where <project-name>
is the name of your Angular application.The easiest way to create a component is with the Angular CLI. You can also create a component manually.
\nTo create a component using the Angular CLI:
\nng generate component <component-name>
command, where <component-name>
is the name of your new component.By default, this command creates the following:
\n<component-name>.component.ts
<component-name>.component.html
<component-name>.component.css
<component-name>.component.spec.ts
Where <component-name>
is the name of your component.
You can change how ng generate component
creates new components.\nFor more information, see ng generate component in the Angular CLI documentation.
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.
\nTo create a new component manually:
\nNavigate to your Angular project directory.
\nCreate a new file, <component-name>.component.ts
.
At the top of the file, add the following import statement.
\nAfter the import
statement, add a @Component
decorator.
Choose a CSS selector for the component.
\nFor more information on choosing a selector, see Specifying a component's selector.
\nDefine the HTML template that the component uses to display information.\nIn most cases, this template is a separate HTML file.
\nFor more information on defining a component's template, see Defining a component's template.
\nSelect the styles for the component's template.\nIn most cases, you define the styles for your component's template in a separate file.
\nAdd a class
statement that includes the code for the component.
Every component requires a CSS selector. A selector instructs Angular to instantiate this component wherever it finds the corresponding tag in template HTML. For example, consider a component hello-world.component.ts
that defines its selector as app-hello-world
. This selector instructs Angular to instantiate this component any time the tag <app-hello-world>
appears in a template.
Specify a component's selector by adding a selector
statement to the @Component
decorator.
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.
\nTo define a template as an external file, add a templateUrl
property to the @Component
decorator.
To define a template within the component, add a template
property to the @Component
decorator that contains the HTML you want to use.
If you want your template to span multiple lines, you can use backticks ( `
).\nFor example:
An Angular component requires a template defined using template
or templateUrl
. You cannot have both statements in a component.
You can declare component styles uses for its template in one of two ways: by referencing an external file, or directly within the component.
\nTo declare the styles for a component in a separate file, add a styleUrls
property to the @Component
decorator.
To declare the styles within the component, add a styles
property to the @Component
decorator that contains the styles you want to use.
The styles
property takes an array of strings that contain the CSS rule declarations.