Introduction to Angular

Learn how to develop multi-platform web applications with Angular, and build an app from the ground up. This workshop is a great choice for developers new to Angular.
Resource:
Intro to Angular → goo.gle/introduction-to-angular
Speaker: Mark Thompson
Watch more:
All Google I/O 2022 Sessions → goo.gle/IO22_AllSessions
Web at I/O 2022 playlist → goo.gle/IO22_Web
All Google I/O 2022 workshops → goo.gle/IO22_Workshops
Subscribe to Google Chrome Developers → goo.gle/ChromeDevs
#GoogleIO

[@dbroche]

Love Mark Thompson's enthusiasm and clear explanations - what a great primer app!

[@jacobstamm]

I've seen probably a couple hundred hours of coding tutorials/demos over the years, and this is one of the best I've seen. The guy is such an effective presenter, the pace was good, and all sorts of little presentation choices (from mentioning that "ng" stands for angular to using a high contract code editor theme) were clearly done with care. I haven't used Angular in a few years, so this was a good primer for me to shake the dust off and learn a little of what's new in the last few versions.

[@markthompson-g]

Jacob, thank you so much for this thoughtful comment and thank you for taking the time to watch this workshop. Can't wait to see what you build.

[@Sebastien-rt3zc]

Thank you so much for this great introduction to Angular. Love explanations. Good Job !

[@EnTransic]

thank you for a great tutorial. you hit essential elements that will help me keep going.

[@ewwitsantonio]

Excellent introduction! The teacher did a great job moving at a steady pace that felt just right. It's not easy to pack this much info under an hour in an understandable way. Will definitely share this with the newcomers to Angular that I know. :) Thanks for creating this video!

[@erandro]

Mark Thompson, you are wonderful! Awesome video - thank you.

[@poligera]

Thank you for this awesome tutorial! One little problem which I have had to solve by myself, was how to clear the detailed location when user wanted to search for another location. I've created another event for that and passed it up to the parent component. A bit of struggling did me good! :) Also, my app is different to yours as I wanted an extra challenge while following your tutorial. :) Thanks again

[@josepalacid]

Finally not a gaming+angular video. Maybe this time, some other channels will understand that those game-streaming angular videos are not what a enterprise level development tool needs.

[@deadlock642]

Thank you for this tutorial!

[@Latif127]

Great tutorial, informative and easy.

[@jmnzz8188]

this tutorial is amazing!!

[@digitalnomad4535]

im learning slowly but surely

[@glenimal]

World class ❤️

[@sabuein]

Thank you.

[@21pradaofficial4]

This video the one🙌🏾🔥🔥😤

[@TayambaMwanza]

Just some thoughts: - Curious, isn't the use of main tag redundant? I've seen it automatically added at compilation? - Maybe for beginners it would be better to inlineStyles and inlineTemplate by default since it's such a small project. - Like the brief intro to interfaces

[@piyushaggarwal5207]

Awesome!

[@zoozolplexOne]

Cool !!!

[@timecraftedwealth]

Please update the angular version in git repository

[@samarthtiku98]

Good video

[@LMacNeill]

This does not work for me. I guess it's too old now? I have the latest version of Node (20.11.0) and the version of Angular (13.2.6) inside this project is constantly complaining that it doesn't support this version of Node, so nothing will compile and run. "ng serve" gives me about 200 red lines of errors. I have Angular version 17.2.1 installed on my computer, and that DOES support Node version 20.11.0, so how do I make this project use the newest version of Angular? And will it break the project if I try to upgrade? I'm thinking it probably will... So what can I do?

[@Tux256ND]

I would love this intro tune as a phone ring. :)

[@jedanijedan3683]

timestamps?

[@vsuschenko]

What the fairhouse is?

[@sqwert654]

Just starting and as an old objective c coder, I rather like the Angular MVC model rather than how React works .

[@daviddesvaux9786]

Apparently, before you can write down app-housing-list you need to import in the parent component (i.e the app in the case), otherwise it is not found. I'm assuming the tools you're using make that autoamtically for you, cause without the (poorly rated) plugin you're using, I had to figure it out and correct it manually. Probably not the best way to teach beginners...

[@orlandojvasquez74]

How did you solve it? I have the same problem. When I create the project the app.module.ts is not automatically generated. Thanks!

[@josepalacid]

It's a shame I can't read the code on my phone screen. And so much blank space waisted!

[@boyajayanthi9989]

Can I get the GIT Link for this code, for better understanding?

[@erandro]

In the description you can find "Resource" which will direct you to this "Intro to Angular" written instruction where the link to the repo is (under step 2: Environment setup > Get the code).

[@kwameagyemang4752]

Most of the basic things were not indicated and did not show how they did certain things, customizing the header and also importing components to the app.components file.

[@daviddesvaux9786]

"Copy the styles from the codelab".... mmmm'k, what codelab exactly ?

[@doremifasolitado]

The one that is mentioned in the beginning of the video and in the video description.

[@pepew7102]

The tutorial is very good but the VSCode theme is hurting my eyes

[@finsflexin]

Agreed. I would rather use white mode

[@markthompson-g]

Ahh, thanks for this feedback. I use a high contrast mode to help devs with various degrees of color blindness.

[@danzoarets2502]

You can change it by going into the settings (gear or Ctrl+,), find the setting "Color theme" and select what you like

[@dmath1490]

I miss C and x86 but i guess Angular is easier to build apps with

[@leili6490]

recall where these symbols appeared to check whether you have mastered the content of this video: # () {{}} [] $ *

[@zalmirdasilvaoliveira7524]

😋

[@johnnybravohonk6964]

Realistically only 40-50% of components will have styles. Realistically only 5-10% of components will have tests. So right after calling `ng g c ...` you will folow-up with removing useless files. How is it efficient? Also jumping between files is slowing developers down. Svelte and Vue have note of these issues.

[@Shammy12]

If you don't need the files you can specify it in the Angular JSON file or per component basis. Styles and html can be put in the Typescript file if you want.

[@TayambaMwanza]

Some tools/extensions also work better with original file extension i.e .html, .css

[@samhanna7382]

Angular sucks react rocks

[@boiimcfacto2364]

Wrong opinion. Angular sucks, React sucks, Vanilla JS for life. Svelte ain't that bad though.

[@neo-babylon7872]

@@boiimcfacto2364 Angular sucks, React sucks, Vanilla JS sucks, C/C++ suck, Assembly x86 sucks, Machine code sucks, HDL's suck, Transistors for life.

[@veridianr2490]

No react goodluck writing weird format css

[@VladyYakovenko]

No

[@TayambaMwanza]

className

[@gordonsulc8319]

Yikes. "Housing insecurity." Just gonna throw in radical leftist jargon to help spread their conspiracy theories.