7.0 KiB
Angular Components Overview
Components are the main building block for Angular applications. Each component consists of:
- An HTML template that declares what renders on the page
- A Typescript class that defines behavior
- A CSS selector that defines how the component is used in a template
- Optionally, CSS styles applied to the template
This topic describes how to create and configure an Angular component.
To view or download the example code used in this topic, see the .
Prerequisites
To create a component, verify that you have met the following prerequisites:
- Install the Angular CLI.
- Create an Angular project.
If you don't have a project, you can create one using
ng new <project-name>
, where<project-name>
is the name of your Angular application.
Creating a component
The easiest way to create a component is with the Angular CLI. You can also create a component manually.
Creating a component using the Angular CLI
To create a component using the Angular CLI:
- From a terminal window, navigate to the directory containing your application.
- Run the
ng generate component <component-name>
command, where<component-name>
is the name of your new component.
By default, this command creates the following:
- A folder named after the component
- A component file,
<component-name>.component.ts
- A template file,
<component-name>.component.html
- A CSS file,
<component-name>.component.css
- A testing specification file,
<component-name>.component.spec.ts
Where <component-name>
is the name of your component.
You can change how ng generate component
creates new components.
For more information, see ng generate component in the Angular CLI documentation.
Creating a component manually
Although the Angular CLI is the easiest way to create an Angular component, you can also create a component manually. This section describes how to create the core component file within an existing Angular project.
To create a new component manually:
-
Navigate to your Angular project directory.
-
Create a new file,
<component-name>.component.ts
. -
At the top of the file, add the following import statement.
-
After the
import
statement, add a@Component
decorator. -
Choose a CSS selector for the component.
For more information on choosing a selector, see Specifying a component's selector.
-
Define the HTML template that the component uses to display information. In most cases, this template is a separate HTML file.
For more information on defining a component's template, see Defining a component's template.
-
Select the styles for the component's template. In most cases, you define the styles for you component's template in a separate file.
-
Add a
class
statement that includes the code for the component.
Specifying a component's CSS selector
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>
in a template.
To specify a component's selector, add a selector
statement to the @Component
decorator.
Defining a component's template
A template is a block of HTML that tells Angular how to render the component in your application. You can define a template for your component in one of two ways: by referencing an external file, or directly within the component.
To 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 your want your template to span multiple lines, you can use backticks ( `
).
For example:
An Angular component requires a template defined using template
or templateUrl
. You cannot have both statements in a component.
Declaring a component's styles
You can declare component styles uses for its template in one of two ways: by referencing an external file, or directly within the component.
To declare the styles for a component in a separate file, add a stylesUrls
property to the @Component
decorator.
To select 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.
Next steps
- For an archictural overview of components, see Introduction to components and templates.
- For additional options you can use when creating a component, see Component in the API Reference.
- For more information on styling components, see Component styles.
- For more information on templates, see Template syntax.