angular standalone component

By Subodh Barsagade | Senior Angular Developer | Updated October 2026 | 9 min read

Introduction: Why Angular Standalone Components Matter

If you started Angular a few years ago, you remember the pain: create a component, then open app.module.ts, then declare it, then import five other modules. Many beginners got stuck here.

The Angular standalone component removes that extra step. Your component can now carry its own dependencies, so you write less code, learn faster, and your app loads faster. In this guide you will learn what a standalone component is, how the styleUrl property works, and see a full Angular standalone component example you can copy today.

Quick Answer: An Angular standalone component is a component that does not need an NgModule. It lists the things it uses (other components, directives, pipes) in its own imports array. In Angular 19 and later, components are standalone by default.

Table of Contents

1. What is an Angular standalone component?
2. NgModule vs standalone (diagram)
3. Angular standalone component example (step by step)
4. The styleUrl property explained
5. styleUrl vs styleUrls vs inline styles
6. Routing and lazy loading
7. Migrating from NgModules
8. Common mistakes
9. Conclusion
10. FAQ

What Is an Angular Standalone Component?

A standalone component is a component that manages its own dependencies. Before, every component had to belong to an NgModule. Now the component itself says what it needs.

• Introduced: Angular 14 (developer preview).
• Stable: Angular 15.
• Default: Angular 19, where you no longer need to write standalone: true.

Think of it like a lunch box. Earlier, all food was in one big kitchen (the module) and every person took from it. Now each person has their own lunch box with exactly what they need.

Benefits of standalone components

• Less boilerplate: no more module files for every feature.
• Easier to learn: new developers understand a component in one file.
• Better tree-shaking: only the code you use goes in the bundle.
• Simple lazy loading: load a single component with loadComponent.
• Easier testing and reuse: import the component and use it anywhere.

NgModule vs Standalone: Graphical Description

Angular Standalone Component Example (Step by Step)

Step 1: Create the component

ng generate component product-card

In Angular 17 and later, the CLI creates a standalone component by default.

Step 2: Write the component

import { Component, input } from '@angular/core';
import { CurrencyPipe } from '@angular/common';

@Component({
  selector: 'app-product-card',
  imports: [CurrencyPipe],          // dependencies live here
  templateUrl: './product-card.component.html',
  styleUrl: './product-card.component.css'   // single stylesheet
})
export class ProductCardComponent {
  name = input.required<string>();
  price = input.required<number>();
}

Note: if your project is on Angular 14 to 18, add standalone: true inside @Component. From Angular 19, it is the default.

Step 3: Write the template

<div class="card">
  <h3>{{ name() }}</h3>
  <p class="price">{{ price() | currency }}</p>
</div>

Step 4: Add styles

.card { border: 1px solid #ddd; border-radius: 8px; padding: 16px; }
.price { color: #0b8043; font-weight: bold; }

Step 5: Use it inside another standalone component

import { Component } from '@angular/core';
import { ProductCardComponent } from './product-card.component';

@Component({
  selector: 'app-root',
  imports: [ProductCardComponent],
  template: `
    <app-product-card name="Laptop" [price]="799" />
  `
})
export class AppComponent {}

Step 6: Bootstrap the app without AppModule

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

Angular Standalone Component styleUrl Property Explained

The styleUrl property tells Angular which CSS (or SCSS) file belongs to this component. It was added in Angular 17 as a simpler version of styleUrls when you have only one stylesheet.

Before (still works): styleUrls: ['./card.component.css'] (an array)
Now (cleaner): styleUrl: './card.component.css' (a single string)

Important facts about styleUrl

• It takes one string, not an array. Writing styleUrl: ['./a.css'] causes an error.
• Styles are scoped. By default, Angular uses emulated view encapsulation, so the CSS affects only this component.
• Works with SCSS, Sass and Less if your project is set up for them. Example: styleUrl: './card.component.scss'.
• Need more files? Use styleUrls with an array.

styleUrl vs styleUrls vs Inline Styles

Option	Type	Best for
styleUrl	string	One external stylesheet (most components)
styleUrls	string array	Multiple stylesheets, or older projects
styles	array or string with CSS	Very small inline styles

Inline example (no extra files)

@Component({
  selector: 'app-badge',
  template: `<span class="badge">New</span>`,
  styles: `.badge { background: #dd0031; color: #fff; padding: 2px 8px; }`
})
export class BadgeComponent {}

Routing and Lazy Loading with Standalone Components

You can lazy load a single standalone component with loadComponent. No module is needed.

// app.routes.ts
import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'products',
    loadComponent: () =>
      import('./products/products.component')
        .then(m => m.ProductsComponent)
  }
];

// app.config.ts
import { provideRouter } from '@angular/router';
export const appConfig = { providers: [provideRouter(routes)] };

Want to manage data across these components? Read my guide on State Management in Angular 2026: NgRx, Signals, or Something New.

Migrating from NgModules to Standalone

Angular gives you an official schematic that does most of the work:

ng generate @angular/core:standalone

It runs in three modes. Run them in this order and test after each one:

1. Convert declarations to standalone
2. Remove unnecessary NgModules
3. Bootstrap the project using standalone APIs

Pro tip: commit your code before each step, so you can undo anything easily.

Common Mistakes (and Fixes)

Mistake	Fix
Error: "is not a known element"	Add the child component to the imports array.
Using *ngIf with no import	Use the new @if block, or import NgIf.
Putting a standalone component in declarations	Put it in imports instead.
styleUrl given an array	Use a string, or switch to styleUrls.
Forgetting standalone: true on Angular 14 to 18	Add it, or upgrade to Angular 19 or later.

Pro tips from Subodh Barsagade

1. Keep one component per file and use clear selector names such as app-product-card.
2. Import only what the template needs. This keeps bundles small.
3. Use loadComponent for every big page.
4. Use styleUrl for readability, and keep CSS short and focused.
5. Prefer signals and the inject() function for modern, clean code.

Conclusion

The Angular standalone component is now the standard way to build Angular apps. It removes module boilerplate, makes code easier to read, and gives you simple lazy loading. You learned how to create one, how styleUrl works, how to use routing, and how to migrate an older project.

Start today: generate one new component, add its imports, connect styleUrl, and run ng serve. If you have a question, write it in the comments and I will help you.

Read More -

1. Benefits Angular Lazy Loading with example

2. Angular Signals: Mastering New Features

3. Angular Animations: Stunning UI Effects.

4. Angular 17.2 new features

Frequently Asked Questions (FAQ)

1. What is an Angular standalone component?

It is a component that works without an NgModule. It declares its own dependencies in the imports array of the @Component decorator.

2. Is standalone: true required?

It is required in Angular 14 to 18. From Angular 19, components are standalone by default, so you can leave it out.

3. What is the styleUrl property in Angular?

styleUrl is a single-string property that links one stylesheet to a component. It was introduced in Angular 17 as a shorter alternative to styleUrls.

4. What is the difference between styleUrl and styleUrls?

styleUrl takes one string. styleUrls takes an array of strings, so it is used for multiple stylesheets.

5. Can I use standalone components and NgModules together?

Yes. A standalone component can be imported into an NgModule, and a standalone component can import an NgModule. This makes step-by-step migration easy.

6. How do I lazy load a standalone component?

Use loadComponent in your route configuration with a dynamic import().

7. How do I bootstrap an app with standalone components?

Use bootstrapApplication(AppComponent, appConfig) in main.ts. No AppModule is needed.

8. Are NgModules deprecated?

No. NgModules still work and many existing apps use them, but the Angular team recommends standalone components for new projects.

Found this helpful? Share it with a fellow Angular developer, and explore more tutorials on AngularThink.