# Angular Modules - Basics

Angular is a popular framework for building rich UIs and high-performance Web Applications. It's also very opinionated in its code structure, meaning that the framework prefers things to be done "the angular way". Part of this means including Angular Modules in your application/library. But what are modules exactly? 🤔🤔🤔

## Modules 

An Angular Module is simply a way to group individual pieces of logic and components together under one umbrella. Let's take a look at the most common module that all Angular applications have: AppModule.

```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  providers: [],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
```

There is an @NgModule decorator that tells Angular to prepare this class to be a Module.
The decorator accepts an object that customizes the module.

<hr>

The `bootstrap` option is specific to `AppModule` since it specifies the entry point through which Angular loads the rest of the application. 

<hr>

The `declarations` array shows what this module contains. *Components, pipes and directives* are listed here and can be used within this module and can interact with each other. For example, if our AppModule was:

```typescript
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, TestOneComponent, TestTwoComponent],
  providers: [],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
```

Then inside our `app.component.html`, we could have something like: 

```html
<app-test-one> </app-test-one>
<app-test-two> </app-test-two>
```

This is because these 2 components were declared in `AppModule` and therefore, were made available. Generally speaking, whatever we put in the `declarations` array of `AppModule` becomes globally available to use.

<hr>

The `imports` and `exports` array tells us what other modules are connected to this one. It allows us to compose modules together like lego blocks. For example:

```typescript
@NgModule({
  imports:      [ CommonModule ],
  declarations: [ FirstComponent, SecondComponent ],
  providers: [],
  exports: [FirstComponent]
})
export class FirstModule { }

@NgModule({
  imports:      [ CommonModule, FirstModule ],
  declarations: [],
  providers: [],
})
export class SecondModule { }
```

Usually these modules would be in different files but they are next to each other for the sake of example. We can see that:

 - `FirstModule` exports a component called `FirstComponent`
 - `SecondModule` imports `FirstModule`. This means that `FirstComponent` is now available to use inside of `SecondModule`.

We also see that `FirstModule` has another component called `SecondComponent` but it isn't exported. This means it can never be made available to other modules that import `FirstModule`.

<hr>

The `providers` array allows us to inject default or replacement values, classes and more wherever it appears in code associated with our module. It's much clearer with an example. 

Angular Material Components have many defaults but we can change those defaults using the `providers` array of the module where our Material Components are imported.

```typescript
@NgModule({
  imports:      [
    BrowserModule, 
    BrowserAnimationsModule,
    MatExpansionModule
  ],
  declarations: [ AppComponent ],
  providers: [
     { 
      provide: MAT_EXPANSION_PANEL_DEFAULT_OPTIONS,
      useValue: {
        collapsedHeight: '64px',
        expandedHeight: '80px'
      }
    }
  ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
```

In the above example, we tell Angular Material to ignore the defaults set for `<mat-expansion-panel>` and apply the configuration that we provided. Remember that this will affect all expansion panels used in this module.  

## Conclusion 

We covered what an Angular Module is and the basic parts that make up Angular Modules. Hopefully this article was helpful and that you understand modules just a little more. 

There are lots of other topics to cover in Angular Modules and I aim to tackle them all. So stay tuned and thanks for reading! ❤️