#13: 🚧 Refactor App Component

Search…
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: 
ng g c list-manager
StackBlitz Instructions 
​
Use the Angular Generator to create the component, then make the component use an inline template. Continue with the remaining instructions on this page.
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!
src/app/app.component.ts
@Component({
  selector: 'app-root',
  template: `
    <h1>
      Welcome to {{ title }}!
    </h1>
  `,
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'My To Do List APP';
}
src/app/list-manager/list-manager.component.ts
import { Component, OnInit } from '@angular/core';
import { TodoItem } from '../interfaces/todo-item';
​
@Component({
  selector: 'app-list-manager',
  template: `
    <app-input-button-unit (submit)="addItem($event)"></app-input-button-unit>
​
    <ul>
      <li *ngFor="let todoItem of todoList">
        <app-todo-item [item]="todoItem"></app-todo-item>
      </li>
    </ul>
  `,
  styleUrls: ['./list-manager.component.scss']
})
export class ListManagerComponent implements OnInit {
  todoList: TodoItem[] = [
    {title: 'install NodeJS'},
    {title: 'install Angular CLI'},
    {title: 'create new app'},
    {title: 'serve app'},
    {title: 'develop app'},
    {title: 'deploy app'},
  ];
​
  constructor() { }
​
  ngOnInit(): void {
  }
​
  addItem(title: string): void {    
    this.todoList.push({ title });
  }
}
Call the new component from the app-root template:
src/app/app.component.ts
  template: `
    <h1>
      Welcome to {{ title }}!
    </h1>
​
    <app-list-manager></app-list-manager>
  `,
That's it! Now we can go on.
💾 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
​See the results on StackBlitz​
Workshop: Todo List - Previous
#12: 📌Add items
Next - Workshop: Todo List
#14: 💅 Adding Style
Last modified 1yr ago
Copy link