angular-cn/aio/content/guide/component-overview.md

7.1 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:

  1. Install the Angular CLI.
  2. Create an Angular workspace with initial application. 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:

  1. From a terminal window, navigate to the directory containing your application.
  2. 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:

  1. Navigate to your Angular project directory.

  2. Create a new file, <component-name>.component.ts.

  3. At the top of the file, add the following import statement.

  4. After the import statement, add a @Component decorator.

  5. Choose a CSS selector for the component.

    For more information on choosing a selector, see Specifying a component's selector.

  6. 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.

  7. Select the styles for the component's template. In most cases, you define the styles for your component's template in a separate file.

  8. 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> appears in a template.

Specify a component's selector by adding 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 you 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 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.

Next steps

@reviewed 2021-03-18