# #13: 🚧 Refactor App Component

We're going to perform a small refactoring. The `app-root` shouldn't have such a large template and all this logic. It should just call another component that will deal with that.

* Create a new component called `list-manager`:

```bash
ng g c list-manager
```

{% hint style="info" %}
**StackBlitz Instructions** ![](https://4180263164-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAFAFKB0K7agCFRGoeS-887967055%2Fuploads%2Fgit-blob-4b8d63886d9ea71a9681ae7b79c538c2e9857091%2Fstackblitz-hint.svg?alt=media)

Use the Angular Generator to create the component, then make the component [use an inline template](https://ng-girls.gitbook.io/todo-list-tutorial/component#inline-template). Continue with the remaining instructions on this page.
{% endhint %}

* Move all the code from `app-root` to `list-manager`.
* You can keep the title in app-root, and give it a nice value.
* Be careful not to change the list manager component's class name!

{% code title="src/app/app.component.ts" %}

```typescript
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h1>
      Welcome to {{ title }}!
    </h1>
  `,
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'My To-Do List App';
}
```

{% endcode %}

{% code title="src/app/list-manager/list-manager.component.ts" %}

```typescript
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TodoItem } from '../interfaces/todo-item';

@Component({
  selector: 'app-list-manager',
  standalone: true,
  imports: [CommonModule],
  template: `
    <app-input-button-unit (submit)="addItem($event)"></app-input-button-unit>

    <ul>
      @for(let todoItem of todoList; track todoItem.title) {
        <li>
          <app-todo-item [item]="todoItem"></app-todo-item>
        </li>
      }       
    </ul>
  `,
  styleUrl: './list-manager.component.scss'
})
export class ListManagerComponent {
  todoList: TodoItem[] = [
    {title: 'install NodeJS'},
    {title: 'install Angular CLI'},
    {title: 'create new app'},
    {title: 'serve app'},
    {title: 'develop app'},
    {title: 'deploy app'},
  ];

  addItem(title: string) {    
    this.todoList.push({ title });
  }
}
```

{% endcode %}

* Call the new component from the `app-root` template:

{% code title="src/app/app.component.ts" %}

```markup
  template: `
    <h1>
      Welcome to {{ title }}!
    </h1>

    <app-list-manager></app-list-manager>
  `,
```

{% endcode %}

That's it! Now we can go on.

{% hint style="info" %}
💾 **Save your code to GitHub**

StackBlitz users - press **Save** in the toolbar and continue to the next section of the tutorial.

Commit all your changes by running this command in your project directory.

```
git add -A && git commit -m "Your Message"
```

Push your changes to GitHub by running this command in your project directory.

```
git push
```

{% endhint %}

{% hint style="success" %}
[See the results on StackBlitz](https://stackblitz.com/github/ng-girls/todo-list-tutorial/tree/master/examples/0_13-refactor-app-component)
{% endhint %}