Understanding Standalone Component and Modularized Component
Tags: angular, webdev, tutorial, codenewbie
Published: 2022-11-25 23:30:33

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`:

```typescript
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: 

```html
<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:

```typescript
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:

{% embed https://stackblitz.com/edit/angular-ivy-3hce9b?file=src/app/components/standalone/standalone.component.ts %}
___
## 📦 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:

```typescript
...
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:

```typescript
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:

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

And here we have the live code example too:

{% embed https://stackblitz.com/edit/angular-ivy-jrdzdn?file=src/app/components/my-component/my-component.module.ts %}
___
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 ✌🏼