Creating a Standalone Component in Angular 19

Step 1: Install Angular CLI (If Not Installed)

Ensure you have Angular CLI installed globally:

npm install -g @angular/cli

Check the version:

ng version

It should display Angular 19.x.x.

Step 2: Create a New Angular Project

Create a new project using the CLI:

ng new my-angular-app

Navigate into the project folder:

cd my-angular-app

Step 3: Generate a Standalone Component

Run the following command:

ng generate component my-standalone-component --standalone

or using shorthand:

ng g c my-standalone-component --standalone

This will generate:

• my-standalone-component.component.ts
• my-standalone-component.component.html
• my-standalone-component.component.scss
• my-standalone-component.component.spec.ts

The generated my-standalone-component.component.ts will look like this:

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

@Component({
  selector: 'app-my-standalone-component',
  standalone: true,
  templateUrl: './my-standalone-component.component.html',
  styleUrls: ['./my-standalone-component.component.scss']
})
export class MyStandaloneComponent {}

Step 4: Inject the Standalone Component into AppComponent

Modify app.component.ts to include the standalone component inside it.

Update app.component.ts as follows:

import { Component } from '@angular/core';
import { MyStandaloneComponent } from './my-standalone-component/my-standalone-component.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MyStandaloneComponent],
  template: '<h1>Welcome to Angular 19</h1> <app-my-standalone-component></app-my-standalone-component>',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {}

Modify main.ts to bootstrap the AppComponent:

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

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

Step 5: Run the Angular Application

Start the Angular app:

ng serve

Open the browser and go to http://localhost:4200. Your standalone component should now be displayed inside AppComponent.

Step 6: (Optional) Add Dependencies to the Component

If your component needs dependencies like CommonModule or FormsModule, import them directly:

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

@Component({
  selector: 'app-my-standalone-component',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './my-standalone-component.component.html',
  styleUrls: ['./my-standalone-component.component.scss']
})
export class MyStandaloneComponent {}

Conclusion

You’ve successfully created a standalone component in Angular 19 and injected it inside AppComponent. This makes it a child component and allows better integration within the app.

For a ready-made project based on this guide, visit: GitHub Repository