> For the complete documentation index, see [llms.txt](https://duncanhunter.gitbook.io/angular-and-ngrx/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://duncanhunter.gitbook.io/angular-and-ngrx/4.-create-event-feature-module.md).
# 4. Create event feature module
## 1. Create a new EventModule feature module
* Run the following command to create a new feature module for events.
```
ng g module event
```
## 2. Add event container component
We will be following the presentational container component pattern to categorise our components into two groups. The container components are the "smart" components that do all the work to manage state, persisting data and navigating. The presentational components become the "dumb" components mainly focused on displaying data. This makes testing, performance tuning and reusability of components much easier.
* Run the following command to generate a container component for the event feature.
```
ng g c event/containers/event
```
## 3. Add event feature module routes
* Add the router module and a route pointing to the new EventComponent.
{% code title="src/app/event/event.module.ts" %}
```typescript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { EventComponent } from './containers/event/event.component';
@NgModule({
imports: [
CommonModule,
RouterModule.forChild([
{ path: '', component: EventComponent }
])
],
declarations: [EventComponent]
})
export class EventModule { }
```
{% endcode %}
## 4. Add a lazy route to the AppModule
Lazy loading is done by the router. The "magic string" used in the "loadChildren" field is the magic that allows Angular to compile the JavaScript in this module into a separate bundle. This separate bundle can now be "lazily" sent to the browser when we navigate to the path making our app faster on the initial load.
* Add a new route to the AppModule.
{% code title="src/app/app.module.ts" %}
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/containers/home/home.component';
@NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule,
RouterModule.forRoot([
{ path: '', pathMatch: 'full', redirectTo: 'home' },
{ path: 'home', component: HomeComponent },
{ path: 'event', loadChildren: './event/event.module#EventModule' }
])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
{% endcode %}
## 5. Add event and home navigation links to the AppComponent
The router links in the HTML are very handy to reduce the logic required inside our app to navigate and the injected dependencies needed to do so.
* Add links to the app component.
{% code title="src/app/app.component.html" %}
```markup
The App
```
{% endcode %}
* Add a ".menu" class with "display: flex" set, this will make the buttons stay inline in our little menu.
* And a ".router-link-active" class which Angular will use to dynamically add this style to the active link in the button we just made.
{% code title="src/app/app.component.scss" %}
```css
.menu {
display: flex
}
.router-link-active {
color: blue;
}
```
{% endcode %}
## 6. Run the app and look at the feature module chunk in the console
This might seems trivial to do but this is a massive improvement to Angular versus AngularJS (the first version) which makes our initial load much smaller and a sub 200kb target in production achievable with some effort.
* Run the app by running the following command and inspect the terminal seeing the extra chunk created for our feature module ("s" is for serve).
```
ng s
```
## StackBlitz link
{% embed url="" %}
Web Link: Link to the demo app running in StackBlitz
{% endembed %}
## Extras and Homework
{% hint style="danger" %}
These extra sections are for doing after the course or if you finish a section early. Please move onto the next section if doing this as a workshop when the instructor advises.
WARNING: Some of these extra sections will make it more difficult to copy and paste the code examples later on in the course.
You might need to apply the code snippet examples a little more carefully amongst any "extras section" code you may add. If you are up for some extra challenges these sections are for you.
{% endhint %}
### Convert the HomeComponent into a feature module
Steps:
1. Add a home module.
2. Remove all references to the `HomeComponent` from the `AppModule`.
3. Add the home route to lazy loaded route to the `AppModule`.
4. Register the `HomeComponent` on the `HomeModule`.
5. Add the `RouterModule.forChild` to the `HomeModule`.
6. Check that is works.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://duncanhunter.gitbook.io/angular-and-ngrx/4.-create-event-feature-module.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.