💡 Before going into the Standalone ding 🛎 few things to do must 🚨

1. Let's fist fly high with updating our global angular cli

ng update @angular/cli @angular/core

And... here we go 🚀😊

2. Now, update your project version of angular:

ng update

👉 Let's now dive into Standalone ❤️

1. Creating Standalone Components:

In developer preview, we want to utilize open source to ensure standalone is fully prepared to be released as a stable API. Add your first standalone component with:

ng g c photo-gallery --standalone

2. Make sure your component have standalone flag used inside @component decorator:

the standalone: true flag allows you to add imports directly in your @Component() without an @NgModule()

@Component({
  selector: 'app-photo-gallery',
  standalone: true,
...
})

3. Bootstrapping your Application with that newly created standalone component:

// in your main.ts

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

....

bootstrapApplication(AppComponent);

👉 Using standalone components in NgModule-based applications:

Standalone components can also be imported into existing NgModules-based contexts. This allows existing applications (which are using NgModules today) to incrementally adopt the new, standalone style of component.

You can import a standalone component (or directive, or pipe) just like you would an NgModule - using NgModule.imports

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

...

import { PhotoGalleryComponent } from 'src/app/standalones/photo-gallery/photo-gallery.component';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    CommonModule,
    ...
    PhotoGalleryComponent
  ]
})
export class HomepageModule { }

💡 After that, you can use the standalone components in that module as well.

👉 Using standalone component inside standalone:

Standalone components specify their dependencies directly instead of getting them through NgModules. For example, if PhotoGalleryComponent is a standalone component, it can directly import another standalone component ImageGridComponent

import { ImageGridComponent } from '../image-grid/image-grid.component';

@Component({
  selector: 'app-photo-gallery',
  standalone: true,
  imports: [CommonModule, ImageGridComponent],
  templateUrl: './photo-gallery.component.html',
  styleUrls: ['./photo-gallery.component.scss']
})

🎥 You can also find a step by step very deep tutorial of mine for implementing standalone components as well:

Thanks. Enjoy v14 features 😊