> For the complete documentation index, see [llms.txt](https://smu-portal.gitbook.io/get-started/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://smu-portal.gitbook.io/get-started/book-module-tutorial/frontend/create-component.md).

# Create Book List Component

We need to generate a component for our application. In our console, navigate to the book management folder that we have created earlier. Your path should look similar to:

```
/smuportal-frontend/src/app/applications/book-management-system
```

Once reached, we are ready to create our component. Angular allows us to generate a component with a simple command:

```
ng generate component list-books
```

We only need to define our component in the module we created. \
Your book management system module should become the following: 

{% tabs %}
{% tab title="src/app/applications/book-management-system/book-management-system.module.ts" %}

```javascript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from "@angular/router";
import { ListBooksComponent } from './list-books/list-books.component';


const routes: Routes = [
  {
    path: "list",
    component: ListBooksComponent
  },
];

@NgModule({
  declarations: [],
  declarations: [ListBooksComponent],
  imports: [
    CommonModule
  ]
})
export class BookManagementSystemModule { }
```

{% endtab %}
{% endtabs %}

Finally, we create a new file "index.ts" in the list-books folder and add the following line:

{% tabs %}
{% tab title="src/app/applications/book-management-system/list-books/index.ts" %}

```javascript
export * from "./list-books.component"
```

{% endtab %}
{% endtabs %}