Understanding Standalone Component and Modularized Component

Hey guys, how are you!?

Today I'll talk about what is standalone components and components with module, what is the difference between their and how we can implement it!

So, let's start!

🧩 Standalone component:

Standalone is an optional property to use and isn't necessary to use with component, we can use it with Directive too, and when we create a component or directive like standalone we don't need to be declared it in a @NgModule, so we don't need to stay tuned with the our module organization! Let's see how is the code:

🎯 First: Generate the standalone component:

To generate a standalone component we can run the command like below, we just need to use the --standalone flag:

👇🏻 Generating the component:
ng generate component myStandAloneComponent --standalone

🎯 Second: To use the standalone component:

To use our standalone component in another component we just need to import the component in our module, as a " module", in the code below we import the component in HomeModule:

import {
  MyStandAloneComponentComponent
} from '../../my-stand-alone-component/my-stand-alone-component.component';

@NgModule({
  declarations: [
      HomeComponent,
  ],
  imports: [
    CommonModule,
    HomeRoutingModule,
    MyStandAloneComponentComponent
  ]
})

And you can use the component normal, for example:

<hello name="{{ name }}"></hello>
<app-standalone></app-standalone>

How to use other's component's in a standalone component:

We can use other components, directives or anything else inside our standalone component, for that we need to import the modules in our @Component({}) inside your my-stand-alone-component. component.ts, as below we are using the mat-spinner component, have a look:

import { CommonModule } from '@angular/common';
import { Component, NgModule, OnInit } from '@angular/core';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';

@Component({
  selector: 'app-standalone',
  standalone: true,
  imports: [MatProgressSpinnerModule],
  template: `
  <div>
    <h2>
      I'm a standalone Component and I'm work!
    </h2>
    <mat-spinner></mat-spinner>
  </div>
  `,
  styles: [
    `
    h2 {

      color: #180D5B;
    }
  `,
  ],
})
export class StandaloneComponent implements OnInit {
  constructor() {}

  ngOnInit() {}
}

And here we have the live code example:

📦 Modularized component:

In my opinion when using modularized we have a better organization of its component dependencies, a better management over lazy loading. The module is "like a box" and inside the box we put only what we need, for example:

I have a banner component and inside it we need the image component, so we just import the ImageModule and we can use the image.

When we have the module in our component, we have a file to declare, import and export that we need, that is, we have a file to just separate our imports and inside our my-component.component.ts we just use to create our modules, inputs, outputs or anything else, now you!? In my opinion this "modularization" is wonderful and also for organization.

Now, let's create a modularized component!

🎯 First: Generate the component:

Now, let's create our component with Angular CLI and let's to use the --skip-import because we are will to create our module and declare the component inside the new module:

👇🏻 Generating the component:
ng generate component myStandAloneComponent --skip-import

Now, we'll to create the module:

👇🏻 Generating the component module:
ng generate module myStandAloneComponent 

After that to use the component inside other components we need to declare and export our component in our module, so inside the new module we generated we need to do this, take a look at the code below:

...
import { MyComponentComponent } from './my-component.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    MyComponentComponent
  ],
  exports: [
    MyComponentComponent
  ]
})

And now to use the component we can use it normally, like the standalone component but we need to import MyComponentModule inside the module of the component we want to use, take a look:

The module code:

import { MyComponentModule } from './components/my-component/my-component.module';

@NgModule({
  imports: [BrowserModule, FormsModule, MyComponentModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

The html code:

<hello name="{{ name }}"></hello>
<app-my-component></app-my-component>

And here we have the live code example too:

Modularization in my opinion is better, more organized and robust!

And for you, which one do you prefer to work on?

That's all guys, I hope you like it and if any questions, suggestions or other topics, please comment!

See you later ✌🏼