An Angular component is a reusable and self-contained building block of Angular applications that encapsulates a part of the user interface (UI), including its template (HTML markup), styles (CSS), and behavior (TypeScript code).

A component is a fundamental building block of Angular applications. Angular 17 is based on the standalone components. Standalone components, directives, and pipes specify their dependencies directly instead of getting them through NgModules. A standalone component can directly import another standalone component.

Getting Started With Angular 17: Creating a project

Structure of the standalone component

*.component.ts

A TypeScript class with behaviors such as handling user input and fetching data from a server. The TypeScript class contains the component’s logic, properties, methods, and decorator metadata.

*.component.spec.ts

The unit test file for the component. It contains test cases to ensure that the component behaves as expected. The unit test contains a describe function used to define a group of related test cases, often called a test suite. The describe function is a fundamental tool in unit testing frameworks like Jasmine and Jest, empowering developers to write well-structured and maintainable test suites.

*.component.html

An HTML template that controls what renders into the DOM. The HTML markup defines the structure and layout of the component’s view.

*.component.css

The CSS file contains styles specific to this component, helping to keep styles scoped and maintainable. Styles only affect elements defined in the component’s template. 

The basic structure generated by Angular CLI for a new demo component.

components/
└── demo/
    ├── demo.component.ts
    ├── demo.component.html
    ├── demo.component.css
    └── demo.component.spec.ts

Metadata of the component

The @Component decorator function provided by Angular marks a class as an Angular component and provides configuration metadata for the component.

• selector – a string value. CSS selector that defines how the component is used in HTML. The selector is typically the name of the HTML element that represents the component. The selector should start with the app- prefix.
• standalone – a boolean value. Defines a standalone or standard component.
• imports – an array. Defines template dependencies to other standalone components, directives and pipes.
• templateUrl – a string value. Defines the HTML template associated with the component.
• styleUrl – a string value. Specifies a URL to an external CSS style file associated with the component.

Example of the @Component decorator function

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [],
  templateUrl: './demo.component.html',
  styleUrl: './demo.component.scss'
})

Create a component

To create a component, use the Angular CLI.

Syntax

ng g c <component_name>

or

ng g component <component_name>

If Angular CLI is installed locally, create a new component by running:

npx ng g component <component_name>

Example

ng g c components/demo

The command ng g c components/demo is a shorthand for generating a standalone component named “demo” inside the “components” folder. A standalone component is a component that sets standalone: true in its component metadata. Standalone components directly import other components, directives, and pipes used in their templates

Usage

Standalone components are directly importable into other standalone components. When you intend to use a component within another component’s template, you must import it first.

Example – demo component in the app component

app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { DemoComponent } from './components/demo/demo.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, DemoComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
  title = 'App component';
}

app.component.html

<app-demo></app-demo>

Conclusion

Angular supports two ways of making a component available to other components: as a standalone component or in an NgModule. The Angular team recommends using standalone components for all new development.