{ "id": "guide/component-overview", "title": "Angular Components Overview", "contents": "\n\n\n
\n mode_edit\n
\n\n\n
\n

Angular Components Overviewlink

\n

Components are the main building block for Angular applications. Each component consists of:

\n\n

This topic describes how to create and configure an Angular component.

\n
\n

To view or download the example code used in this topic, see the .

\n
\n

Prerequisiteslink

\n

To create a component, verify that you have met the following prerequisites:

\n
    \n
  1. Install the Angular CLI.
  2. \n
  3. Create an Angular workspace with initial application.\nIf 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.
  4. \n
\n

Creating a componentlink

\n

The easiest way to create a component is with the Angular CLI. You can also create a component manually.

\n

Creating a component using the Angular CLIlink

\n

To create a component using the Angular CLI:

\n
    \n
  1. From a terminal window, navigate to the directory containing your application.
  2. \n
  3. Run the ng generate component <component-name> command, where <component-name> is the name of your new component.
  4. \n
\n

By default, this command creates the following:

\n\n

Where <component-name> is the name of your component.

\n
\n

You can change how ng generate component creates new components.\nFor more information, see ng generate component in the Angular CLI documentation.

\n
\n

Creating a component manuallylink

\n

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.

\n

To create a new component manually:

\n
    \n
  1. \n

    Navigate to your Angular project directory.

    \n
  2. \n
  3. \n

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

    \n
  4. \n
  5. \n

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

    \n\nimport { Component } from '@angular/core';\n\n\n
  6. \n
  7. \n

    After the import statement, add a @Component decorator.

    \n\n@Component({\n})\n\n\n
  8. \n
  9. \n

    Choose a CSS selector for the component.

    \n\n@Component({\n selector: 'app-component-overview',\n})\n\n\n

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

    \n
  10. \n
  11. \n

    Define the HTML template that the component uses to display information.\nIn most cases, this template is a separate HTML file.

    \n\n@Component({\n selector: 'app-component-overview',\n templateUrl: './component-overview.component.html',\n})\n\n\n

    For more information on defining a component's template, see Defining a component's template.

    \n
  12. \n
  13. \n

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

    \n\n@Component({\n selector: 'app-component-overview',\n templateUrl: './component-overview.component.html',\n styleUrls: ['./component-overview.component.css']\n})\n\n\n
  14. \n
  15. \n

    Add a class statement that includes the code for the component.

    \n\nexport class ComponentOverviewComponent {\n\n}\n\n\n
  16. \n
\n

Specifying a component's CSS selectorlink

\n

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.

\n

Specify a component's selector by adding a selector statement to the @Component decorator.

\n\n@Component({\n selector: 'app-component-overview',\n})\n\n\n

Defining a component's templatelink

\n

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.

\n

To define a template as an external file, add a templateUrl property to the @Component decorator.

\n\n@Component({\n selector: 'app-component-overview',\n templateUrl: './component-overview.component.html',\n})\n\n\n

To define a template within the component, add a template property to the @Component decorator that contains the HTML you want to use.

\n\n@Component({\n selector: 'app-component-overview',\n template: '<h1>Hello World!</h1>',\n})\n\n\n

If you want your template to span multiple lines, you can use backticks ( ` ).\nFor example:

\n\n@Component({\n selector: 'app-component-overview',\n template: `<h1>Hello World!</h1>\n <p>This template definition spans\n multiple lines.</p>`\n})\n\n\n
\n

An Angular component requires a template defined using template or templateUrl. You cannot have both statements in a component.

\n
\n

Declaring a component's styleslink

\n

You can declare component styles uses for its template in one of two ways: by referencing an external file, or directly within the component.

\n

To declare the styles for a component in a separate file, add a styleUrls property to the @Component decorator.

\n\n@Component({\n selector: 'app-component-overview',\n templateUrl: './component-overview.component.html',\n styleUrls: ['./component-overview.component.css']\n})\n\n\n

To declare the styles within the component, add a styles property to the @Component decorator that contains the styles you want to use.

\n\n@Component({\n selector: 'app-component-overview',\n template: '<h1>Hello World!</h1>',\n styles: ['h1 { font-weight: normal; }']\n})\n\n\n

The styles property takes an array of strings that contain the CSS rule declarations.

\n

Next stepslink

\n\n\n
Last reviewed on Thu Mar 18 2021
\n
\n\n\n" }