To-Do List in Angular with source code in GitHub.

Sdílet
Vložit
  • čas přidán 19. 12. 2022
  • This to-do list application in Angular is using a template-driven approach with form control validations form.invalid and form.dirty
    You can find the source code here:
    github.com/katkovd73/to-do-li...
    You can find the slides I was using in the video here:
    github.com/katkovd73/Tutorial...
    Links mentioned in the video:
    Introduction to forms in Angular
    angular.io/guide/forms-overview
    Bootstrap form template
    getbootstrap.com/docs/4.0/com...
    Bootstrap table template
    getbootstrap.com/docs/4.0/con...
    Angular validators
    angular.io/api/forms/Validators
    Angular directive ngFor
    angular.io/api/common/NgFor
  • Věda a technologie

Komentáře • 38

  • @Sarmadfarhankhan
    @Sarmadfarhankhan Před rokem +3

    This is very good and easy to understand. I like the way you teach the stuff. Thanks a lot.

  • @mrx4256
    @mrx4256 Před 10 měsíci +2

    Great tutorial! Thank you for explaining each and every part..❤❤

  • @SusilVignesh
    @SusilVignesh Před 6 měsíci +1

    Just wanted to say i completed this tutorial.. and it is really good and please keep up with the good work.. Thanks!

  • @muniramirzoeva6656
    @muniramirzoeva6656 Před 9 dny

    perfect explanation. Thanks

  • @1988proxy
    @1988proxy Před 8 měsíci

    thank you very very much for this tutorial!!!!!!

  • @Teju.0109
    @Teju.0109 Před 6 měsíci

    Thank you for this tutorial. I'm new to Angular, & Learnt a lot.
    If we want to edit the existing task, how can we implement next to the delete button? Is there any option in bootstrap for edit?
    Thanks in advance 🙏

    • @dkprogramming
      @dkprogramming  Před 6 měsíci

      You are welcome. There are a few ways you could implement the edit functionality. The easiest way is to add an Edit button to make the task editable. You would also need a Save button to save the new value into the array. It would all be done with Angular. Bootstrap is a framework that helps you make your app look good, saves you time to style your application. I got asked a few times about an Edit functionality. I will make a video about it and post it this weekend.

  • @TravelIdea99
    @TravelIdea99 Před rokem

    Amazing😍

  • @ffotyk9938
    @ffotyk9938 Před měsícem

    i love you so thank

  • @NikyAriane
    @NikyAriane Před rokem

    @DK Programming Your tutorial is really good and you explain very well. Can you please explain how to modify a task? Thank you very much

    • @dkprogramming
      @dkprogramming  Před rokem +1

      Thank you! I am glad you liked it. As for modifying a task, you would need to add a button with a click event that would pass the data for that particular task to a new page or a dialog popup. After you modify it, you would need to have a button with a click event that would save the modified task. Good luck!

  • @AlcoTube
    @AlcoTube Před rokem +1

    Now I want to meet the cat 🐱in the background

    • @dkprogramming
      @dkprogramming  Před rokem +1

      She does interfere with the sound sometimes :-)

  • @supermous5393
    @supermous5393 Před 6 měsíci

    thank you sir

  • @user-bs8je3rg1j
    @user-bs8je3rg1j Před 5 měsíci

    Hi sir in this we are using angular and bootstrap only right sir

    • @dkprogramming
      @dkprogramming  Před 5 měsíci +1

      Hello! Yes, we are using Angular and Bootstrap (for styling) in this project.

    • @user-bs8je3rg1j
      @user-bs8je3rg1j Před 4 měsíci +1

      @@dkprogramming sir how to add a database in this please add this part also please

  • @GauravJS10
    @GauravJS10 Před 3 měsíci

    which version of angular is used?

    • @dkprogramming
      @dkprogramming  Před 3 měsíci +1

      When I build it, it was Angular 14. Since the project is fairly simple, you can use any version of Angular. The only difference is, if you want to build it with Angular 17 and higher, when you generate a new project using CLI, don't generate it as a stand-alone components project. Instead of using "ng new todo" use "ng new todo standalone=false" and it will be structured exactly the same way as it was in the tutorial.

    • @GauravJS10
      @GauravJS10 Před 3 měsíci +1

      thank you
      @@dkprogramming

  • @kokonaingmyanmar2917
    @kokonaingmyanmar2917 Před 8 měsíci

    Can you share your angular power point slide. This lesson is easy to understand for me. 😃🤩

    • @dkprogramming
      @dkprogramming  Před 8 měsíci +1

      I am glad the video was helpful. I saved the slides to GitHub. The link in the description of the video.

  • @stormbytes
    @stormbytes Před rokem

    Nice tutorial! btw... # = hash not dash

    • @dkprogramming
      @dkprogramming  Před rokem

      Thank you! I heard it when I was editing it but didn't want to redo that part since everyone probably knew what I meant. :-)

  • @bayandamabuza6587
    @bayandamabuza6587 Před rokem

    Great Content
    Just Subscribed at 272
    For every 1k sub I'll be here till a Mil and beyond
    Keep blessing us Sir
    Thank you

  • @josetrauler721
    @josetrauler721 Před 2 měsíci

    Сделайте что нибудь со своим акцентом...

    • @dkprogramming
      @dkprogramming  Před 2 měsíci

      Это не ко мне. Обращайтесь к богу. 🙂

    • @nobodyknows730
      @nobodyknows730 Před 9 dny

      Do something with your brain