Components in Angular

By Syncfusion®, Inc. · Last updated November 5, 2026

What a component is, standalone components, creating one with the CLI, the @Component decorator and its metadata, selectors, templates and styles, and how to render, nest and reuse components.

What Are Components?

A component is a reusable building block that defines one part of the user interface and the logic behind it.

An Angular app is a set of components, such as a header, a menu and a product card, placed inside one another.

Each component has three parts:

• A class. TypeScript code that stores the component's data and defines its methods, such as what happens when a button is clicked.
• A template. The HTML that defines what the component displays on the screen.
• Styles. The CSS that sets the component's colors, spacing and layout.

Real-World Example

An e-commerce product page is typically split into components such as Header, SearchBar, ProductGallery, PriceBox, ReviewList and CartButton.

Each component has its own template, styles and logic, so a team can build and test ReviewList without touching PriceBox.

The same ProductCard component renders every item on the search results page, the wishlist and the "Recommended for you" section.

@Componentclassdata and logictemplatethe HTMLstylesthe CSSComponentone piece of the screen

The decorator, the class, the template and the styles together make one component.

Run the code below. It is one complete component with all three parts.

One component: class, template and styles

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h2>Welcome, {{ studentName }}!</h2>
    <p>You have {{ lessons }} lessons left.</p>
  `,
  styles: `
    h2 { color: #dd0031; }
    p { color: #555; }
  `,
})
export class App {
  studentName = 'Asha';
  lessons = 12;
}

Change studentName to your own name and run it again. The heading changes, because the template reads its value from the class.

Standalone Components

A component often uses other components. For example, App uses Header and Footer. Angular must know which components App is allowed to use.

A standalone component lists those components itself, in its own imports list:

@Component({
  selector: 'app-root',
  imports: [Header, Footer],
  template: `<app-header /> <app-footer />`,
})
export class App {}

Older Angular apps did this differently. They used a separate file called a module (NgModule) to register components, and each component had to be added to that file before it could be used.

All new Angular components are standalone, so you do not need a module.

Creating Components

The easiest way to create a component is with the Angular CLI. Run this command inside your project folder:

ng generate component header

You can also use the short form:

ng g c header

The CLI creates a new folder with four files:

src/app/header/
├── header.ts        the component class
├── header.html      the template
├── header.css       the styles
└── header.spec.ts   a test file

The class file looks like this:

import { Component } from '@angular/core';

@Component({
  selector: 'app-header',
  imports: [],
  templateUrl: './header.html',
  styleUrl: './header.css',
})
export class Header {}

You can also write a component by hand. A component is a TypeScript class with the @Component decorator placed directly above it. In this course's practice editors, all the parts live in one file, so you can see everything at once.

A new Header component, used by App

import { Component } from '@angular/core';

@Component({
  selector: 'app-header',
  template: `<header>📚 DevTutorials</header>`,
  styles: `header { padding: 8px 12px; background: #2563eb; color: white; border-radius: 6px; }`,
})
export class Header {}

@Component({
  selector: 'app-root',
  imports: [Header],
  template: `
    <app-header />
    <p>Start learning Angular today.</p>
  `,
})
export class App {}

Component Decorator (@Component)

A decorator is a function, written with an @ in front of its name, that adds information to the class below it. Angular reads this information to decide how to use the class.

@Component marks a class as a component. It also gives Angular the settings it needs to create the component: its tag name, its template and its styles.

@Component({
  selector: 'app-welcome',
  template: `<p>Hello!</p>`,
})
export class Welcome {}

Without @Component, the class is a plain TypeScript class. Angular cannot display it, because it has no template and no selector.

Component Metadata

The object inside @Component({ ... }) is called metadata. Metadata is the configuration of the component: its tag name, its template, its styles and the other components it uses. Angular reads the metadata to create the component.

These are the metadata options you will use most:

A component needs a template. Use either template or templateUrl, not both.

Every common metadata option in one component

import { Component } from '@angular/core';

@Component({
  selector: 'app-badge',
  template: `<span>NEW</span>`,
  styles: `span { background: #15803d; color: white; padding: 2px 8px; border-radius: 10px; font-size: 12px; }`,
})
export class Badge {}

@Component({
  selector: 'app-root',
  imports: [Badge],
  template: `<h3>Angular Components <app-badge /></h3>`,
})
export class App {}

Component Selector

The selector is the name of the component's HTML tag. When Angular finds this tag in another component's template, it creates the component at that position.

If the selector is 'app-badge', you write <app-badge /> (or <app-badge></app-badge>) where you want the badge to appear.

Parent templateOn the screen<h2>My Store</h2><app-badge /><p>Welcome</p>My StoreNEWWelcome

Write the selector as a tag. Angular shows the component in its place.

Selector names follow a few rules:

• Use lower case letters.
• Use a dash, such as app-header. A dash keeps your tags apart from normal HTML tags like header.
• Start with a short prefix. New projects use app, so names look like app-header and app-footer.

Component Template

The template is the HTML that defines the content and structure a component displays on the screen.

A template is standard HTML plus Angular template syntax. The most common feature is interpolation. You write a class property name inside double curly braces, like {{ title }}, and Angular replaces it with the property's current value.

The template shows values from the class

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h2>{{ course }}</h2>
    <p>Lessons: {{ lessons }}</p>
    <p>Hours: {{ lessons * 0.5 }}</p>
  `,
})
export class App {
  course = 'Angular Fundamentals';
  lessons = 14;
}

Interpolation can also contain a simple expression. {{ lessons * 0.5 }} multiplies the value of lessons by 0.5 and displays the result.

Component Styles

Component styles are CSS rules that apply only to one component's template.

Angular limits these rules to the component that declares them. A style written for one component does not change the elements of any other component. This is called style encapsulation.

Run the example. Both components have a <p> tag. Only the App paragraph turns red.

Styles stay inside their own component

import { Component } from '@angular/core';

@Component({
  selector: 'app-note',
  template: `<p>I am the Note component. My text stays normal.</p>`,
})
export class Note {}

@Component({
  selector: 'app-root',
  imports: [Note],
  template: `
    <p>I am the App component. My text is red.</p>
    <app-note />
  `,
  styles: `p { color: #dd0031; font-weight: bold; }`,
})
export class App {}

The rule p { color: red } lives in App. Angular applies it only to the paragraphs that App itself writes. The paragraph inside Note keeps its default color.

Inline vs External Templates

You can store a template in one of two places.

An inline template is written inside the class file with template:

@Component({
  selector: 'app-header',
  template: `<h1>My Store</h1>`,
})
export class Header {}

An external template is written in its own .html file. The class points to it with templateUrl:

@Component({
  selector: 'app-header',
  templateUrl: './header.html',
})
export class Header {}

A simple rule: if the HTML is longer than about three lines, move it to its own file.

Inline vs External Styles

Styles can also be stored in one of two places.

Inline styles are written in the class file with styles:

@Component({
  selector: 'app-header',
  template: `<h1>My Store</h1>`,
  styles: `h1 { color: navy; }`,
})
export class Header {}

External styles are written in a .css file. The class points to it with styleUrl:

@Component({
  selector: 'app-header',
  templateUrl: './header.html',
  styleUrl: './header.css',
})
export class Header {}

Both forms keep the styles inside the component. The only difference is where you write them.

Rendering Components

Rendering is the process in which Angular creates a component, builds the HTML from its template and inserts that HTML into the page.

Angular renders components in two situations:

1. The root component is started by bootstrapApplication(App) in main.ts. Angular puts it in the <app-root> tag of index.html.
2. Every other component is rendered when another template uses its selector.

To render a component inside another one, take two steps:

1. Add the component class to the parent's imports list.
2. Write its selector tag in the parent's template.

Render the same component three times

import { Component } from '@angular/core';

@Component({
  selector: 'app-star',
  template: `<span>⭐</span>`,
})
export class Star {}

@Component({
  selector: 'app-root',
  imports: [Star],
  template: `
    <p>Rating: <app-star /><app-star /><app-star /></p>
  `,
})
export class App {}

Each <app-star /> tag creates a new copy of the Star component. Add two more tags and run it again. You get a five-star rating.

Nesting Components

Nesting means putting a component inside another component.

The outer component is the parent. The component inside it is the child. A child can have its own children, so the components form a tree.

AppHeaderProductListProductCardProductCardparent: Appchildren: Header, ProductList

A parent shows its children. Children can have their own children.

Components inside components

import { Component } from '@angular/core';

@Component({
  selector: 'app-product-card',
  template: `<li>🎧 Headphones · ₹1,999</li>`,
})
export class ProductCard {}

@Component({
  selector: 'app-product-list',
  imports: [ProductCard],
  template: `
    <h3>Products</h3>
    <ul><app-product-card /><app-product-card /></ul>
  `,
})
export class ProductList {}

@Component({
  selector: 'app-root',
  imports: [ProductList],
  template: `
    <h2>My Store</h2>
    <app-product-list />
  `,
})
export class App {}

Follow the tree from the top:

1. App displays a heading and the ProductList component.
2. ProductList displays its own heading and two ProductCard components.
3. Each parent imports only its own children. App does not import ProductCard.

Reusable Components

A reusable component is a component you write once and use many times, each time with different data.

The parent passes data to the child through an input. An input is a class property that receives its value from the parent component. You mark a property as an input with @Input(). The parent then sets it in square brackets: [title]="...".

CourseCardwritten onceAngular20 hoursTypeScript12 hoursRxJS8 hours

One component, written once, shows different data each time.

One card component, three different courses

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-course-card',
  template: `
    <div class="card">
      <strong>{{ title }}</strong>
      <span>{{ hours }} hours</span>
    </div>
  `,
  styles: `
    .card { display: flex; justify-content: space-between; padding: 8px 12px;
            margin: 6px 0; border: 1px solid #c7d2fe; border-radius: 8px; background: #eef2ff; }
  `,
})
export class CourseCard {
  @Input() title = '';
  @Input() hours = 0;
}

@Component({
  selector: 'app-root',
  imports: [CourseCard],
  template: `
    <app-course-card [title]="'Angular'" [hours]="20" />
    <app-course-card [title]="'TypeScript'" [hours]="12" />
    <app-course-card [title]="'RxJS'" [hours]="8" />
  `,
})
export class App {}

The CourseCard code is written once. The three cards share the same template and styles, but each card displays the title and hours passed to it.

Reusable components remove duplicated code. When you fix a bug or change the design in CourseCard, every card in the app receives the change.

Component Naming Conventions

Consistent names make a project easier to read and maintain. Angular projects follow the same naming rules, so any Angular developer can locate a component's files quickly.

When you run ng g c product-card, the CLI follows all of these rules for you.

New Angular projects use short class names such as ProductCard. Older projects add the word "Component", such as ProductCardComponent, and name the file product-card.component.ts. Both work. Pick one style and use it in the whole project.

Common Mistakes

Check Yourself

Exercises

What to Remember

• A component defines one part of the user interface. It combines a class (data and logic), a template (HTML) and styles (CSS).
• @Component metadata tells Angular the selector, the template, the styles and the imports.
• To display a child component, add its class to the parent's imports list and write its selector tag in the parent's template. Use @Input() to pass data into a reusable component.

Next: Angular Templates, how a template connects HTML to the data and methods in the class.