Todo List Tutorial
Primary version
Primary version
  • Welcome to the ngGirls tutorial!
  • Workshop: Todo List
    • πŸ‘€About
    • #0: πŸ’ƒ Introduction
    • #1: βŒ› Installations
      • a. StackBlitz instructions
    • #2: πŸ…° Angular kicks in
    • #3: πŸ“ Component
    • #4: ✏ A new component
      • a. StackBlitz instructions
    • #5: πŸ’Ό Class
    • #6: πŸ“₯ Property binding
    • #7: πŸ“€Event binding
    • #8: πŸ“Ž Element ref - #
      • a. About
      • b. Explore
      • c. Resources
    • #9: πŸ“‹ The To Do list
    • #10: βž• New component: todo-item
    • #11: β›“ Interface
      • a. StackBlitz instructions
    • #12: πŸ“ŒAdd items
    • #13: 🚧 Refactor App Component
    • #14: πŸ’… Adding Style
    • #15: πŸ”‹ Creating a Service
    • #16: 🎁 Add Items Using the Service
    • #17: πŸ’ΎLocal storage
    • #18: πŸ—‘ Remove item
    • #19: πŸ”˜ Adding a checkbox
    • #21: πŸ’ͺ Enrich the todo-item component
    • Appendix 1: Git and GitHub
    • Appendix 2: πŸ›° Deploying your app
      • Deploy to Azure Static Web Apps
      • Deploy to GitHub Pages
        • a. StackBlitz instructions
    • Appendix 3: Tutorial Extensions
    • Appendix 4: Generating a new project
    • Troubleshooting
      • Installation
  • More Workshops
    • Second workshops - CRUD and HTTP
      • #1 MongoDB
      • #2 Local server
      • #3 http in diagrams
      • #4 POST
      • #5 GET
      • #6 DELETE and PUT
    • Gallery with Rx.js
      • #0: Init photo gallery
      • #1: Observable
      • #2: More interaction! Upload photos
      • #3: Merging Observables
      • #4: Filtering by category
      • #5: Adding photos to category
    • Forms
      • #1: Template-driven forms
      • #2: Reactive forms
      • #3: Form builder
    • NgRx
      • #1: Actions and reducers
      • #2: Store Devtools
      • #3: Implementing actions in app
      • #4: Selectors
    • RxJS
      • Operators
      • Play time!
    • Blog Editor
      • #1 βš™οΈConfiguring firebase
      • #2 πŸ’…Add Angular Material
      • #3 πŸ’…Add Bootstrap
      • #4 🧭Add Navigation
      • #5 ✏️Add Editor
      • #6 βš™οΈConnect Database
      • #6 πŸ’…Add Feed
      • #7 ✏️Edit Post
      • #9 πŸš€Deploy
      • #10 ✏ ️Next Steps
Powered by GitBook
On this page
  1. Workshop: Todo List

#4: ✏ A new component

Previous#3: πŸ“ ComponentNexta. StackBlitz instructions

Last updated 1 year ago

In this chapter we will write a whole new component. It will allow us to add an item to the todo list. It will be composed of the HTML elements input and button. We will call it Input-Button-Unit.

We'll use the Angular CLI to generate all the needed files and boilerplate for us. The Angular CLI takes commands in a terminal window. This doesn't mean that we have to stop the process ng serve. Instead, we can open another terminal window or tab and run the additional commands from there. The changes will be reflected immediately in the browser.

Open another terminal tab and run:

ng g c input-button-unit

StackBlitz Instructions

We'll use the Angular Generator to create a component. Follow the instructions on the page and return here to continue the worksheet.

As we've seen before, ng is the command for using the Angular CLI. g is a shorthand for generate. c is a shorthand for component. input-button-unit is the name we give to the component.

So the long version of the command is (don't run it):

ng generate component input-button-unit

Let's take a look of what the Angular CLI created for us.

It created a new folder called src/app/input-button-unit. There are three files there (or four if you're not using inline-template):

  • input-button-unit.component.scss - this is where the style that's specific to the component will be placed.

  • input-button-unit.component.spec.ts - this is a file for testing the component. We will not deal with it in this tutorial.

  • input-button-unit.component.ts - this is the component file where we will define its logic.

  • input-button-unit.component.html - this is the HTML template file, if you're not using inline-template.

Open the file input-button-unit.component.ts. You can see that the Angular CLI has generated the component's configuration for us, including its selector, which is the name we gave preceded by the prefix app, and a default template:

src/app/input-button-unit/input-button-unit.component.ts
@Component({
  selector: 'app-input-button-unit',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './input-button-unit.component.html',
  styleUrl: './input-button-unit.component.scss'
})

The prefix app will be added to the component selector of all the components you will generate. This is to avoid name conflicts with other components and HTML elements. For instance, if you create a component named input it will not conflict with HTML's <input /> element, since its selector will be app-input.

We can use this component as-is and see the result!

Open the root component file, app.component.ts and add the app-input-button-unit tag inside the template (remember we refactored the root component to have an inline template):

src/app/app.component.ts
template: `
  <h1>
    Welcome to {{ title }}!
  </h1>

  <app-input-button-unit></app-input-button-unit>
`,

Check what's new in the browser!

Let's add some content in our new component. First, add a title member which we will use as the todo item title:

src/app/input-button-unit/input-button-unit.component.ts
export class InputButtonUnitComponent {
  title = 'Learn about components';

It will not interfere with the app-root component's title, since each component's content is encapsulated within it.

Next, add an interpolation of the title member in the template:

src/app/input-button-unit/input-button-unit.component.ts
template: `
  <p>
    input-button-unit works!
    The item title is: {{ title }}
  </p>
`,

Check out the result!

This component doesn't do much at this point. In the following chapters, we will learn about the component class, and then implement the component's logic.

πŸ’Ύ Save your code to GitHub

We will save code within StackBlitz so you can skip the GitHub sections below. Save your work in progress by pressing Save in the toolbar.

app is the default prefix, which is good for your main application. However, if you're writing a library of components to be used in other projects, you should choose a different prefix. For example, the library uses the prefix mat. You can create a project stating the prefix of your choice using the flag --prefix, or change it afterwards in the file angular.json.

Great job adding your first component! Let's save your work to GitHub so your code is accessible outside of your local machine. Go to for instructions to publish your code.

StackBlitz Instructions

Angular Material
See the results on StackBlitz
Appendix 1: Git and GitHub
StackBlitz instructions