Angular 2 Tutorial for Beginners: Learn Angular 2 from Scratch

Want to learn Angular 2 from scratch in a fun, step-by-step and pragmatic way? Watch this tutorial and get started.

I’m excited to let you know that I just published a brand new Angular course. This is the most comprehensive course on Angular in the market, where you’ll learn everything about Angular from the basic to the advanced topics and finally, you’ll build and deploy a real e-commerce application with Angular 4, Firebase 4 and Bootstrap 4.

For a LIMITED TIME, you can get the FULL course with a BIG DISCOUNT here:

Table of content:

00:00 What is Angular and what you can do with it
03:31 Architecture of Angular 2 apps
08:23 Getting the tools
09:40 Your first Angular 2 app
18:54 Angular 2.0 with TypeScript for Beginners (Udemy course)
19:50 Creating components
36:39 Dependency injection
42:25 Exercise
53:46 Discount coupon to get Angular 2 course on Udemy

Seed project:

Stay in touch:






46 responses to “Angular 2 Tutorial for Beginners: Learn Angular 2 from Scratch”

  1. Prem Ranjan Avatar

    got the subscription for INR 450

  2. An Enemy Avatar

    next episode: learn how to be a faggot like mosh

  3. Gayatri Bisht Avatar

    Awesome explanation.. Thanks Mosh

  4. Amar Shivers Avatar

    if any chance can we download or clone the code?

  5. Nir Zion Pengas Avatar

    Great video Mosh I am going to complete the entire course at udemy so happy I found it! I wanted to ask you if you have a course that deals with building mobile apps with Angular2 as well or otherwise point me in the right direction?

  6. Piyush Jain Avatar

    Hey Moash, Amazing Video, Loved it .

    Where I can see tutorial for complete application mention in this video. ?

  7. Mika Kaakinen Avatar

    Awesome stuff. Clear explanations.

  8. Ross Olson Avatar

    VIEWERS: To complete this tutorial as of August 2017, you will need to make the following changes to your code:

    1) Before the npm install command at 00:12:00, add the following line to package.json:

    "typings": "^0.8.1"

    It will go on line 26 (the bottom of the devDependencies section), and remember to put the trailing comma at the end of line 25. (This is noted as an on-screen annotation in the video.)

    2) At 00:51:38, line 16 of auto-grow.directive.ts should be:

    this.renderer.setElementStyle(this.el.nativeElement, 'width', '200');

    Thank you to everyone who made comments on this video. This comment is just a compilation of the smart people below.

  9. Hugo Hu-man Avatar

    this.renderer.setElementStyle(this.el.nativeElement, 'width', '200');

  10. Goran Ilic Avatar

    big failure of this tutorijal "ypu dont give us adress of seed u used here

  11. abdul mobeen Avatar

    is there a quick way to include node_modules folder from already created Angular projects
    which reside in same folder in which I am creating new project. e.g


    /can i include node_modules dir for this project
    because it takes much time each time I create a new project.

    thanks in advance.

  12. Michal R Avatar

    Is the Angular cli mature now? (9:53)

  13. Jake K. Avatar

    Btw many THANKS to Mosh for uploading this 😀

  14. Jake K. Avatar

    also, use let (ngFor="let course of courses") instead of the # (the # is for older versions)

  15. विवेक मेका Avatar

    Finally stumbled on the best online tutor ever. Mosh, you are awesome. Keep uploading. Cheers ☺

  16. विवेक मेका Avatar

    Finally stumbled on the best tutor. Mosh you are awesome. Keep uploading. Cheers !!

  17. Jake K. Avatar

    directives from @Component got deprecated :/


    Not able to download the angular seed project from the link

  19. Albert van der Merwe Avatar

    You're awesome. Thanks for the great tutorial.

  20. Aruna Warnasooriya Avatar

    You are a genius..!! Thank you..!

  21. Balu Ganesh Avatar

    You just cleared my doubts in minutes. Awesome!.. Just subscribed your channel. Thanks a lot (Y)

  22. Watson Anikwai Avatar

    Love your tutorials Mosh.

  23. Mohammad Manzoor Avatar

    Thanks mosh for wonderful course design, You way of explanation is superb 🙂

  24. Priyanka Garg Avatar


    I am getting below error while doing npm install command.
    Please help how to solve below error

    angular2-quickstart@1.0.0 postinstall C:UsersAkhilDesktopangular2-seedang
    > typings install

    'typings' is not recognized as an internal or external command,
    operable program or batch file.
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! angular2-quickstart@1.0.0 postinstall: `typings install`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the angular2-quickstart@1.0.0 postinstall script.
    npm ERR! This is probably not a problem with npm. There is likely additional log
    ging output above.

  25. Charisma Nguyen Avatar

    Where can I find the tutorial for the final project shown at 2:34?

  26. anthony israel Avatar

    Thanks for the video, but I have a problem when execute this command npm install in folder project.

    This is the log in cmd:

    npm WARN deprecated es6-module-loader@0.17.11: This project has been deprecated for "npm install es-module-loader" based on the newer loader spec.
    npm WARN deprecated node-uuid@1.4.8: Use uuid module instead

    > angular2-quickstart@1.0.0 postinstall C:Usersisrraangular2-seed
    > typings install

    "typings" no se reconoce como un comando interno o externo,
    programa o archivo por lotes ejecutable.

    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_moduleschokidarnode_modulesfsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    npm WARN angular2-quickstart@1.0.0 No description
    npm WARN angular2-quickstart@1.0.0 No repository field.
    npm ERR! Windows_NT 10.0.15063
    npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install"
    npm ERR! node v6.11.0
    npm ERR! npm v3.10.10
    npm ERR! code ELIFECYCLE
    npm ERR! angular2-quickstart@1.0.0 postinstall: `typings install`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the angular2-quickstart@1.0.0 postinstall script 'typings install'.
    npm ERR! Make sure you have the latest version of node.js and npm installed.
    npm ERR! If you do, this is most likely a problem with the angular2-quickstart package,
    npm ERR! not with npm itself.
    npm ERR! Tell the author that this fails on your system:
    npm ERR! typings install
    npm ERR! You can get information on how to open an issue for this project with:
    npm ERR! npm bugs angular2-quickstart
    npm ERR! Or if that isn't available, you can get their info via:
    npm ERR! npm owner ls angular2-quickstart
    npm ERR! There is likely additional logging output above.

  27. anil kolliboina Avatar

    sorry, I Solved that problems…

  28. anil kolliboina Avatar

    Nice couse, i got some errors at the same time i solve that problems. Thank u sir, nice class…

  29. Hosein norouzi Avatar

    آقا مشفق دمت گرم رو سفیدمون کردی. Thanks man! you are the best

  30. vijay thorat Avatar

    Getting below error Please help me to resolve it
    sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA= integrity checksum failed when using sha1: wanted sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA= but got sha1-5VkFvOfqDCDp4uLnH3xgG2nA0VA=. (10512 bytes)

  31. Batnini Abdelwehed Avatar

    Great ! The best angular 2 tutorial. Thank you very much.

  32. conrad pinnow Avatar

    just a heads up, angular-cli will be depreciated soon, use @angular/cli instead

  33. Manasa Chintalapati Avatar

    when I'm trying to do "npm install" I'm getting warnings like no files or directories and no descriptions

  34. Ishwar Deoolkar Avatar

    jquery is not working in angular2

  35. Ishwar Deoolkar Avatar

    i have one question regarding angular2 and jquery

  36. Ali Rahimy Avatar

    Thanks Mosh. Just a kind reminder to people watching this video: After you installed node you should install the following as well:

    npm install -g lite
    npm install -g lite-server
    npm install -g concurrently –save
    npm install -g es6-shim@^0.35.0
    npm install -g reflect-metadata@0.1.2
    npm install -g rxjs@5.0.0-beta.6
    npm install -g zone.js@^0.6.12
    npm install -g angular2

    If you are using Linux, please do not forget sudo the commands above eg:
    sudo npm install -g lite

    You might also need to replace "concurrent" with "concurrently" in" your package.json file prior to running npm start command
    In the meantime please don't forget to decrypt the content of seed folder before doing all of the above

  37. Cristian Baciu Avatar

    Wow, this does not work at all for the current version of angular. I hope that in the future they will settle for a standard and stop changing things from one day to another, because if they remain on the same path, why even do tutorials on angular anymore if everything is going to change all the time?

  38. alfredoalfa Avatar

    hi, i'm interesting in to buy the full course but first i wanna know if the videos have subtitles in english

  39. Pritichhanda Pattanayak Avatar

    how to apply custom theme to web app by using angular 2 and typescript…..plz share ur idea….its really very important to me now……

  40. Ashu Tomar Avatar

    Hi Mosh,
    This video is very nice and helpful for beginners like me , there is a question If am returning array of object instead of array from CourseService or AuthorService its giving compilation error "data is not assignable to type 'string'". Please tell me How could I return array of objects from service and get its value to my view.

  41. satishakumar awati Avatar

    Best video on angular 2 for beginners who want understand architecture how stuff works and how to get started.

  42. Naryck Avatar

    can't download seed file 🙁

  43. Naveen Tiwari Avatar

    From where I can get the required setup file (.zip) or startup code to setup.

  44. Sonal Jathan Avatar

    import {Component} from '@angular/core';
    import {CoursesComponent} from './courses.component'

    selector: 'app',
    template:'<h1>Angular 2 Project</h1><courses></courses>',
    directives: [CoursesComponent]
    export class AppComponent {

    Note: in directive line it is showing me
    Argument of type '{ selector: string; template: string; directives: typeof CoursesComponent[]; }' is not assignable to parameter of type 'Component'.
    Object literal may only specify known properties, and 'directives' does not exist in type 'Component'.
    Can u Help

  45. Hemant Randive Avatar

    whats the angula2-seed folder and what's the use of it- Am a very new to angular 2

Leave a Reply

Your email address will not be published. Required fields are marked *