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
  2. #11: ⛓ Interface

a. StackBlitz instructions

Previous#11: ⛓ InterfaceNext#12: 📌Add items

Last updated 4 years ago

We'll use the Angular Generator to create other Angular files such as interfaces and services.

The local development instructions uses the Angular CLI command ng g i interfaces/todo-item to create the interfaces folder and the interface file in one command. Unfortunately, we have to work around a small bug in StackBlitz and create the folder manually.

Right click on the app folder and select New Folder and name the folder interfaces.

Now we can use the Angular Generator. Right click on interfaces and select Angular Generator, then select Interface.

Type todo-item in the text box to create the interface.

Only component files have HTML templates so we don't need to shuffle any code around.

Return to the previous page to .

continue the tutorial