Welcoming Standalone Components in Angular v14 π
With standalone components, directives and pipes, the standalone: true flag allows you to add imports directly in your @Component() without an Module
π‘ 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 π