How to Create Standalone Components in Angular

With the introduction of standalone components in Angular versions 14 and later, building Angular applications is simplified.

---

As the feature is still in developer preview, we will test it to determine its functionality, but be aware that it may undergo changes before it becomes stable.

What has changed?

Creating a standalone component is surprisingly simple. The only thing we must do is add the --standalone flag when creating the component via the CLI. So in the next steps, we are going to see it in action.

---

Generating a component

With the following command, we are creating a new component named standalone. (The name of the component could be anything else, but I just used the name standalone because of the simplicity).

ng g c standalone --standalone

After executing this command, the generated component should appear as follows.

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

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

  ngOnInit(): void {}
}

---

New properties?

As you could notice, in the code above, we have two new properties in the @component decorator.

• standalone – A boolean value that tells the Angular’s standalone API that this component is actually standalone.
• imports – An array that accepts modules, pipes, directives, and components (The components have to be standalone as well, to be able to import them).

---

Using components in modules and components that are not standalone

As the standalone component is not going to be imported into any module while generating it, we have to do it manually if we are looking to import the component into a non-standalone / standard component.

So, to achieve this, we are going to, in this case, app.module.ts and to add the standalone component into imports array, not into the declarations as is the case with standard components.

So our app module should look like this:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StandaloneComponent } from './standalone/standalone.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    StandaloneComponent,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

After importing the component we are able to use it in our app.component.ts.

---

Importing standalone components into standalone components

This step is really easy. Let’s say that we have created a new standalone component named button and we have to import it into the standalone component that we generated earlier.

To achieve this, we would have just to add that component to our imports located in the standalone component’s decorator, as in the following example.

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ButtonComponent } from './components/button/button.component';

@Component({
  selector: 'app-standalone',
  standalone: true,
  imports: [CommonModule, ButtonComponent],
  templateUrl: './standalone.component.html',
  styleUrls: ['./standalone.component.scss'],
})
export class StandaloneComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}
}

Now, we are able to use the button component in our standalone component and do whatever we want.

---

Conclusion

Standalone components are really flexible and easy to use. We can look at them now as real components, or as shared components / shared apps/libs.. etc., as we are able if structured properly, just to copy the component from one to another project and use it out of the box.

Here is also a link to a repository that I created for this purpose: https://github.com/adnan-halilovic/standalone-components-angular

You can watch the tutorial video on this topic.

Thank you for reading the article.

For more content like this, follow me on youtube and other social networks that you can find on the website.