Angular Snippets

Angular 15 Standalone Components

angular15 standalone components

Here is a quick example of how to use a standalone component in an existing NgModule. It demonstrates the interoperability and recent innovation of Angular v15. Let`s start with the component itself.

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

  selector: "fancy-button",
  standalone: true, // magic lies here

  template: `
      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
export class ButtonComponent {}

And for the integration in an NgModule, you can just do the following:

import {ButtonComponent} from "my-fancy-ui";
  declarations: [AppComponent],
  imports: [
    HttpClientModule, RouterModule.forRoot(routes), ButtonComponent], // import like a module
  providers: [],
  bootstrap: [AppComponent],
export class AppModule {
Back to snippets