Angular 2 Complete Course - Sections 1 & 2

New Version (updated Angular Version) of this Video: • Angular 2 Tutorial - C...
Enjoy the complete (fully updated!), extremely comprehensive, 5-star rated course: acad.link/angular
Boilerplate Github Repository: github.com/mschwarzmueller/an...
For RC: github.com/mschwarzmueller/an... (change imports to use @angular instead of angular2!)
You can follow me on Twitter (@maxedapps), Facebook ( / academindchannel ) or visit our Website (www.academind.com).
See you in the videos!

[@chayanbiswas7376]

how to file upload after form submit by model driven in angular 2????

[@maxsaltykov3321]

Really liked the lesson. You are nice person, and I like that idea with teacher on the screen, I saw no one who makes lessons that way, thank you, Max!

[@academind]

Thank you, I'm happy to hear that you like my style of teaching! :)

[@chamalliyanage]

I was looking for a beginner tutorial. THis is the best tutorial i found so far. Thanks for your time. Long live

[@academind]

+Chamal Liyanage That's really cool to hear, many thanks! The best thing is: This course will get updated in a couple of weeks to reflect the most recent state of Angular 2 + a lot of user feedback!

[@MaxPanic]

Exactly what I was looking for! Enrolled.

[@academind]

+John Ioannou Awesome to hear this, welcome to the course! :)

[@panchmukhiakhada3825]

Thanks for taking time to put together something like this. :)

[@academind]

You're welcome, I'm very happy that you're liking it! :)

[@nileshb.1402]

Wunderbar! gr8 and right video to start learning angular 2. Thanks :)

[@urbandarvish]

After seeing several videos I found this, and I found the best every explanation! And Maximilian is coolest trainer I have seen. Highly recommended to start from this video...! Thanks for making me pro from beginner ;)!

[@academind]

+F Khan So awesome to hear this, thanks a lot!! :)

[@romaniaplus]

Max, you're amazing!!! Thank you!

[@academind]

+Daniel Awesome to hear this, thanks a lot! :)

[@4greesh]

You are just awesome !! Its very much useful for angular js beginners like me :) :) Thank you so much for this wonderful tutorial :)

[@Tolg]

Thank you Max. I purchased this udemy course. This is really good work. Often I see many tutorials struggle with how to get complex topics introduced in a easy to understand fashion. Getting the order of topics presented can be tricky and your approach is the best Angular 2 format I have seen yet! Well done and thank you!

[@academind]

Many thanks for those kind words and welcome on board! I wish you a lot of fun and good learnings with the course! :)

[@eshoolukayode4381]

hi , I have watched and re- watched a lot of your videos on angular 2. I need to really commend your good work for sharing your knowledge in a clear manner.Well done man!!!!

[@academind]

That's really awesome to hear, thanks so much!

[@eshoolukayode4381]

Mindspace : plz can you share the source codes for these tutorials?

[@academind]

Should all be available in the github link provided in the video description (choose the right branch there) :)

[@hamidrezaarzaghi7349]

How lovely you are! thank you for all of your valuable videos. thanks a lot man

[@academind]

Thank YOU so much for your absolutely fantastic feedback Hamid!

[@Lindokuhleism]

I am starting my journey on angular and I found these tutorials to be the best, couldn't help but hit the subscribe button, Thanks a lot

[@academind]

Awesome! Thanks a lot!

[@allowambeBOWWAMB]

Great presentation, great presenter, clear speech and great mood :)

[@academind]

Great feedback, thank you! :)

[@iam1213]

I am the best.Thank me

[@academind]

You definitely are, thanks a lot ;)

[@Titanionz]

Your Angular2 videos is awesome! and you are cool man) thx

[@academind]

+Lost on clouds That's really great to hear, thank you so much!

[@grigorpenev1761]

Your channel is extremely undervalued. If it had shares, I'd have bought every single stock.

[@academind]

Wow, just awesome to hear that! We'll let you know about the IPO :) No, seriously - thanks so much for your amazing feedback, that really means a lot us!

[@ibrarahmed8563]

Where can i find the zip file you mentioned i.e. workspace-manualinstallation? It is not present in the attachment.thanks in advance

[@mohtof2000]

Greaaaaaaaat, Thx a lot Max, i like the way that you explain!!!

[@academind]

+Mohamad Rashid Awesome to hear, thank you so much Mohamad!

[@abdulmobeen-developer]

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 app1/ /node_modules /src . . app2/ /can i include node_modules dir for this project /src . . because it takes much time each time I create a new project. thanks in advance.

[@contributeskills8921]

Thanks , It was really good video to get angular2 . i have watched almost all the video here and now i am going for angular 2 development its really help me how angular 2 works. Thanks once again.

[@academind]

+Pawan Jha That's really great to hear! :)

[@jasusig8946]

Great bro, thanks a lot, I always follow your tutorials.

[@academind]

Awesome to hear that Shiv! :)

[@virdisantenor6322]

Thanks bro, i really appreciate your tutorial. It couldn't be better explained!

[@academind]

So happy to hear that! Thanks a lot Virdis!

[@nemesisghost]

I am on this course (have the ionic course lined up after) and would like to say thank you. Fantastic course, very easy to follow, very clear and descriptive, definitely recommend to anyone wanting to learn angular.

[@academind]

Thanks so much for your awesome feedback! :)

[@nemesisghost]

You're welcome :) Just one quick question however, ive noticed in the videos when you are doing string interpolation, you add a space before and after the object {{ name }} however i noticed a lot of default angular does not have the space {{name}} Is it a requirement to have the space before and afterwards? It seems like it should be obvious, however it is slightly confusing. Thanks!

[@PraveenVR]

Great presentation, Very useful for Angular 2 beginners. Thank you very much Max :)

[@academind]

Thanks for your very nice feedback Praveen! :)

[@reguluschung1352]

Great & Simple Angular 2.0 Introduction! :)

[@academind]

+Regulus Chung Thank you, it's great to hear that! :)

[@BoolFalse]

Max, you are good teacher.. thanks a lot !!! you helped me for undertsanding this very easy. Angular 2 interested, awesome and easy with your lessons !!!

[@academind]

Thanks for your awesome feedback, great to hear you enjoyed it! :)

[@saabirmohamed636]

my favorite teacher...excellent clear explanations...keep it up dude!

[@academind]

+Saabir Mohamed So awesome to hear this, thanks a lot!

[@santoshkumar-rl5rz]

I did not found the workspace manual installation folder

[@sameerdewan881]

Thanks boss! Quick question, this has nothing to do with your teaching style because you are amazing, but like I'm hating angular 2 syntax. How can I use react in a way that mimics all the inclusive features in ang2? What would I have to learn how to use? Like npm packages

[@jollydesigner5885]

I must admit, this is impressive. His explaining is top notch.. not something you would expect for such a low cost course. I was skeptical at first because he is a self taught developer but nah, this guy knows what he's talking about. Thank you for the great content.

[@academind]

Wow, many thanks for this great feedback, I'm extremely happy to hear that you're enjoying the course! :)

[@jbauson1]

Your tutorials are really awesome! Mind to share what editor you're using? It's pretty cool.

[@academind]

+Jay Bau Hi Jay, I'm happy that you're enjoying my videos! :) I use Webstorm (for JS/Angular2) and PHPStorm by Jetbrains.

[@niharnightraiser]

Hi , i want to create a PWA with the angular 2 as the mobile site to one of my project which is in zend framework 1 it should act a module , can anyone help me with the structure ? or suggest a better approach?

[@faizanbaig3952]

but when my browser come up with angular 2 boilertplate ....with localhost/300 nothing were show at the explorer page like yours Angular 2 boilerplate helow world. even i followed everything ..can u help me or tell me why my internet explorer not showing localhost page like urs

[@chetanpl]

Nice tutorial. I like it 😊

[@peizhongli9555]

I love your style of teaching , although I come from China, I think your tutorials is wonderful.

[@yevheniitsybulskyi2020]

Thanks man for youre work !

[@academind]

+Yevhenii Tsybulskyi I'm happy to hear that you're enjoying it! :)

[@JoinMeInLearning]

Awesome Teaching skills, find very much easy to understand. actually now i can develop my First App using your Tutorial. :) Looking for more such kind of video tutorial from you. Thank you very much, Professor

[@academind]

I just want to thank you for your awesome comment Harshad! I really enjoy creating these videos and receiving such a rewarding feedback definitely keeps me motivated :)

[@shivanshuaggarwal]

Hi, there are many playlists of angular2 in your channel. I got lost and not able to figure out which one to follow first. Can you please tell me the sequence of your tutorials ?

[@academind]

Hi Shivanshu, I'd recommend going with the following one first: kzbin.info/aero/PL55RiY5tL51rLeDxRPlE6Hsnss3QDCCKc

[@arunredmi5338]

I have a static website and in another folder I have an angular App..When I try to call Angular app from some Link in static website...doesnt work..kindly help

[@ElvisPapa89]

Very nice and helpful tutorial Maximilian! I'm coming from the Angular 1 world and need to learn Angular 2. Hope your tutorial will work :))

[@academind]

Great to hear that Elvis, thank you! The Udemy course will also see an update in a few weeks to reflect some student feedback as well as the (then hopefully released) most recent version of Angular 2. But you may start now, the course is up-to-date1

[@GautamKocharS]

Excellent and very helpful for beginners.

[@academind]

Thanks so much Gautam!

[@hakankor]

Thank you for great tutorial.

[@academind]

You're welcome, I'm glad you're liking it!

[@pranaysute635]

hey Maximilian, Am sorry but just now I run my code again and in JavaScript console I got this error "Individual declaration in merged declaration 'MyComponentComponent' must be all exported or all local." on my-component.component.ts file. Sorry I am new to Angular 2 so I am not able to figure out where I am going wrong?

[@academind]

+Pranay Sute You are trying to import MyComponent in your MyComponent file. That won't work. It's related with your other problem - you're putting your import and directives metadata in the wrong place/ file.

[@muzammilwebtechie6105]

Thank you so much for this video, is it not possible to run this in linux machine??? coz I am getting the below error message when I did "npm install" npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.15: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

[@mikematsumoto]

Great Great job man. thank you sooo much.

[@academind]

Happy to hear that you're enjoying it!

[@chandantalreja3803]

Hello im stuck,i have select multiple tag in my html file i need to save all of dem in ngmodel how to do it can pls help??

[@ashamuttinakantimath6924]

i am trying to create shopping list app but i am not able to bind the components . if i used directives in decorator i am getting error.please help me

[@SriChinthalapudi]

Impressive presentation. I like it very much.

[@academind]

Awesome to hear that, thanks so much!

[@atuljoshi9187]

My scss is not compiling to css directly I have to restart the application for compiling scss to css, how to get that done int he fly ?

[@hchawla13]

Can you post the link for workspace manual installation here,I cant find it in the description

[@academind]

You can basically follow the setup from the official quickstart guide on angular.io. The course module showing this is not available for free ;)

[@usafuck5567]

Your course is very good, I want to learn more,thank you.

[@academind]

I'm really happy to hear this, thanks for the great feedback! :)

[@onirbanislam2791]

I am new in programming and choose Angular js. Do this course is for beginner who don't know Angular 1 ?

[@chetanpl]

Nice tutorial. I like it

[@igmtan]

Great presentation, great presenter

[@academind]

Many, many thanks for the great feedback! :)

[@santoshdahal1476]

Hi, I am comfortable with Java, Spring Boot and Hibernate as ORM. I want to learn Angular2. I am not sure how easily I can adapt to it and use it in Spring Framework. Could you please guide me? One more thing, other than Java which language would you suggest me to learn? Personally I am little bit unaware of Node.Js and its scope in real world.Thanks for the video. I will definitely gain much more from this.

[@faizanbaig3952]

my localhost/300 page come with empty when i wrote "npm start" in my command prompt

[@tetaliradhakrishna6783]

Excellent tutorials . I like the way u teaching

[@academind]

Thanks so much for your great feedback Radha - happy to hear you're liking it! :)

[@DiazGunturFebrian]

Great presentation, very clear and easy to understand. Good Job n Thank you :)

[@academind]

Thanks a lot! :)

[@DiazGunturFebrian]

You're welcome

[@lediofejzaj6768]

Very good explanation....Thank You

[@academind]

Very happy to hear that, thanks a lot!

[@3qz278]

Thanks very much,perfect tutorials to Angular 2 for people like me,who want to learn

[@academind]

Great to hear you're enjoying it, thanks for your amazing feedback!

[@rohitkumar-eu1hs]

thanks a lot man for this course....its very clean also i like your teaching style...

[@academind]

Many thanks for your great feedback, I'm really happy to hear that you're enjoying it! :)

[@academind]

That's really great to hear, thanks so much for your amazing feedback!

[@aristostheZ]

Hello my app.component.js file look like that: (function(app) { app.AppComponent = ng.core.Component({ selector: 'my-app', template: 'My First Angular 2 App' }) .Class({ constructor: function() {} }); })(window.app || (window.app = {})); why is that? thanks

[@gireeshtekale4919]

which file you downloaded for work space ? and from where ?

[@diwakarkumarjha5090]

+Gireesh Tekale here is link github.com/mschwarzmueller/angular-2-beta-boilerplate ..Thanks Max

[@syrinekaroui7952]

You are my heroo :D ! I need to know if I can reduce node modules size because I am using Angular2 with IBM MobileFirst and when I deploy my app on device the size of node modules present the half of my app size !

[@academind]

Yes you can and actually content on deployment (and therefore making it production-ready) will soon be added to the Udemy course. Basically you may of course bundle and minify everything. Also, most of the installed node_modules are actually development dependencies.

[@shivamverma3729]

Where can i find the zip file you mentioned i.e. workspace-manualinstallation? It is not present in the attachment.

[@giusi6011]

Have you found that file?

[@sagarlimbu1377]

it's in github link above.

[@sritamjagadev5860]

github.com/mschwarzmueller/angular-2-beta-boilerplate

[@Ayyappa_amara]

this video is very interesting but I did not found the workspace manual installation folder. Please guide me where to find.

[@academind]

The link is in the video description :)

[@jenanhong1973]

Hey, thank for you for sharing your course on KZbin. I have followed your steps to set up the development environment which you show us in this video but I have encountered a problem that I don't know what is the software to open this project. (I have successfully run npm start on browser which shows Hello World.) I never saw this UI before. I use Windows but not Mac now. If you see this message, please tell me. Thank you so much.

[@academind]

What do you mean with "software"? You can use any editors (e.g. Sublime, Atom) or IDE (e.g. Visual Studio Code, Webstorm) of your choice.

[@jenanhong1973]

Thank you for your reply! I have built my IDE(Visual Studio Code). That is what I mean the 'software'. LOL You do really clear presentation in the video which helps me a lot. Thanks!

[@academind]

You're welcome - thanks for your great feedback! :)

[@albarleta2511]

Clicked the ads and subscribed to say thank you.

[@academind]

+Al Barleta Thank you so much! :)

[@PieterVenterZA]

+Al Barleta same here

[@academind]

Many, many thanks!! :)

[@anim916]

where is the link to download workspace ?

[@rcpanch]

Hi, great tutorials to start with in Angular 2. Unable to find the workspace code, would you please provide the link from where we can download the workspace files, thanks.

[@academind]

Thanks a lot! This is only a snippet from my Udemy course, unfortunately you can't attach files on KZbin.

[@786adeelghaffar]

which IDE plugin you are using for development

[@academind]

No specific plugin, Webstorm (my IDE) has great TypeScript/ Angular 2 support built in.

[@Francis06100]

Hello, i am having an error adding and importing a third party library into my angular application the node_module i am trying to import is googleapis. can you please give me a hint how to do? thanks

[@academind]

Are you using my boilerplate? I don't update that anymore, I recommend switching to the official CLI. There, the official docs on their Github page explain how to integrate a third-party project. If you use a different setup (like my boilerplate), you'll need to adjust the systemjs configuration to correctly load it

[@rajatchouksey4438]

May i know which editor or ide you are using??

[@academind]

Of course! I use Webstorm by Jetbrains

[@Abubakershekhani]

Till now it looks good. Nice tutorial. Finally a good one for Angular 2 and Ionic 2. One question a bit out of topic: How to create such video with a person in it and the screen. What setup did you use for this video? The tools, software etc.

[@academind]

Hi, happy to hear that you're liking it! :) I use a greenscreen which I edit out with Adobe After Effects. For cutting, I use Adobe Premiere. Screen recording is done with Screenflow (since I use Mac)

[@kritisharma8477]

Thank you Sir, you are amazing tutor!

[@academind]

Thanks so much, happy to hear you're enjoying it!

[@hanumegowda6032]

Thank you bro i learned lot things from Your tutorial.

[@academind]

That's awesome, thanks a lot for sharing this!

[@yoanribeiro]

Hey Maximilian, thank you very much for these videos, they are truly helpful. Now, with the RC version of Angular 2 the equivalente boilerplate repository, which, for the beta version, was "angular-2-beta-boilerplate", is the "angular2-rc1-changes-to-beta"? Thank you very much for your hard work!

[@academind]

+Yoan Ribeiro Hi, I'll soon update the course, you may either continue with the beta or use this boilerplate: github.com/mschwarzmueller/angular2-seed. Keep in mind that with RC you'll have to replace the import package from "angular/" to "@angular" (e.g. "angular2/core" becomes "@angular/core")

[@yoanribeiro]

Mindspace Thank you very much for responding :)

[@academind]

You're welcome :)

[@yoanribeiro]

+Mindspace though, I am having a problem with the refactoring, before the rc I could have multiple angular2 apps (since the app that I am doing requires it) creating a folder for each apps with their respective components and now I can't seem to make it work, before I just had to specify where the boot was: "System. import('app/folderOfTheApp/boot)" and it worked like a charm but now it gives me errors on the loading of the angular2 libs any idea?

[@academind]

That's because the loading/ mapping is now configured inside the systemjs.config file. You need to add the files you want to load there, too

[@SoccerTutorialHD]

Wow, this amazing video keeps me awake :) Are you also using Ionic 2.0?

[@academind]

+SoccerTutorialHD I'm extremely happy to hear this, thank you! :) I'll also create content about Ionic 2 in the future, yes :)

[@muscaiu]

the Seth Rogen of the Angular2 world!

[@academind]

+Cris Muscalu (TyLeR) Haha :D

[@RealParadox85]

+Cris Muscalu (TyLeR) I was literally going to type this! He does look like Seth Rogen haha

[@ashishrijal2495]

are there any new concepts explained on the other video,by other video i mean the "new version(updated angular 2 version) of this video" whose link you have left on the description?i just finished watching this video and i understood the whole concept of angular2,thanks to you sir.if this video and that other video are all together same and explains the same concept than i would rather start watching the series of weather app to get more understanding.

[@academind]

There are some minor syntax changes but you certainly don't need to re-watch the full video if you already understood everything.

[@ashishrijal2495]

thank you.

[@PawanNogariya]

Awesome! BTW, which IDE you were using?

[@academind]

Great to hear! I use Webstorm by Jetbrains.

[@AlexanderTheGreatol]

can I only get a 30 day free trial of webstorm? How do I download the full version?

[@raghavendrank4452]

Great Presentation...

[@academind]

Thanks a lot! :)

[@lironlichterman5630]

Can you add which type of editor u r using?

[@academind]

+Liron Lichterman Hi, I use PHPStorm/ Webstorm by Jetbrains :)

[@NileshRatanGupta]

its really awesome documentations

[@academind]

Thanks so much!

[@kallolroy3695]

if you don't mind can you please describe more details about the IDE you are using?Also let me know is there plugin you are using and setup details?

[@academind]

Of course, I use Webstorm by Jetbrains and it offers good Angular 2 / TypeScript support out of the box. I don't use any special plugins or extensions (besides built in ones).

[@MuhammadBilal-gx7ui]

When you reach 57.31 time of your video you write [class.is-awesome]="inputElement.value='yes'" when I write it give me an error kindly check it.Error come when I write Yes. Error given below. S2345:Argument of type '{ selector: string; template: string; yes: string; styleUrls: string[]; }' is not assignable to parameter of type '{ selector?: string; inputs?: string[]; outputs?: string[]; prop

[@maizhihao6190]

thank you so much for your presentation, I'm looking forward to become an angular 2 developer in the future.

[@academind]

Thanks for your great feedback Mai! :)

[@capt41]

platformBrowserDynamic().bootstrapModule(AppModule); we import AppModule class in main.ts How we we pass only the class name not the object ( i mean AppModule() like this )?????????

[@jayanayana]

Hi..did u done any demo about angular2 drag and drop?

[@academind]

No, I don't have a tutorial covering this specific task, sorry

[@AshishPatel-yq4xc]

the git link does not have a src folder and when I do npm start all I see if 404 in the terminal

[@WaqasShahzad]

You need to navigate to git cloned folder , and run npm install for mac/linux you might need to run sudo npm install . After that npm start will work

[@marouachaieb6490]

Hi, What IDE do you use for the angular development 2 thanks

[@academind]

Hi, I use Webstorm by Jetbrains.

[@marouachaieb6490]

thank you

[@shan-ud6rc]

hi i see the your tutorial video very clear!

[@victoroliveira9752]

What code editor are you using?

[@academind]

I'm using Webstorm by Jetbrains.

[@solo_wanderer]

May I know which editor you are using, I think I missed that part.

[@academind]

Sure, I use Webstorm by Jetbrains

[@solo_wanderer]

Thanks so much! I like your tutorials a lot. Keep up the good work :)

[@garethbmclean]

Could I learn the basics from this video or do I need to watch angular 9 videos?

[@Ajaykumar-cr1fg]

Hi, I have seen your tutorial videos. Its really awesome and very helpful. But I am little confused and stucked in my website coding, So can you please solve my issues... 1. I want to save posted form data into my json file which is on my local server like: localhost:3000/API/users.json. It gives error EXCEPTION: Error during evaluation of "ngSubmit" 2. I want to deploy on server this angular2. How and what steps I need to do. 3. Can I do Angular2 with Laravel. If yes then how can i setup it?

[@SidTrip]

What have you tried so far?

[@chetanpl]

how to use jquery and javascript in angular 2. please give a example.

[@anupbid]

Max I really love your contents.. I enrolled your course on angular 4 and needless to say it's mind blowing.. I wanted to learn nodejs so you were the first on my mind so I looked up ur Udemy courses and nodejs was not there .. there was a mean stack one but it's not in-depth . So I wanted to ask you if you ever plan to release an in-depth nodejs tutorial with something like socket.io .. and I'm sure there maybe other people who would learn from you.. so I wanted to know if you plan on doing something like this..?? Thanks in advance.

[@academind]

Thanks for your awesome feedback Anup, I'm happy that you're enjoying the Angular course. You're right, I don't have a Node course on Udemy right now. I might create one in the future but it's not #1 priority right now to be honest. I do have a series here on KZbin though.

[@chayanbiswas7376]

how to setup boostrap Udemy Angular 2 Boilerplate............?????...........help me

[@academind]

You should use the Angular CLI now, the course on Udemy has been updated, unfortunately, that's not possible for KZbin videos. But you can find more up-to-date Angular videos on my channel!

[@chayanbiswas7376]

Thanks ....

[@mrunalkubal9040]

typings folder is missing in my project.