Components in Angular - Learning Angular (Part 3)

Learn what components are and how to create the homepage of the application with a step by step tutorial.
Resources:
Completed code for this lesson → goo.gle/learni...
Catch the next episode, Customizing components and directives → goo.gle/426o7B0
Watch more episodes of Learning Angular→ goo.gle/Learni...
Subscribe to Angular → goo.gle/Angular
#Angular

[@Angular]

Watch more episodes of Learning Angular→ goo.gle/Learning-Angular

[@elyoaprogrammer]

Excellent Angular series for beginners. I would love watch similar tutorials from the Angular team with more advanced topics. Thanks

[@Angular]

Wow! Thanks so much for this feedback - we really appreciate it. Which topics would you like us to cover?

[@elyoaprogrammer]

@@Angular Hello, thanks for your answer.. I would like to watch something more oriented to a real life project to handle real common scenarios and explain more advanced topics: like do the secure login process, work with interceptors, content-projection, custom directives and topics like that. I know there is much information about this on the Internet but I really enjoyed all the videos of the @Angular team!

[@pavankumar4909]

​@@Angular interceptor please authguard please

[@dima13693]

terrible series for beginners. The download button to download the original template doesnt work, which cascades into a bunch of other issues. Someone should have checked their work when updating the tutorial for v18.

[@TrashCanSystem]

I'm so glad this is working so far, I say this because usually KZbin tutorials almost never works, lol

[@TayambaMwanza]

I think at 1.26, when you're describing the different parts that will be broken up into components, it would be helpful to highlight the areas or outline them to give a nice visual indicator of each component/section.

[@TayambaMwanza]

Also self closing tags but I think that will be too much work.

[@Angular]

Great feedback! We'll consider this for the next version, for sure!

[@darksorcerer1575]

I would recommend that if anyone gives a thumbs up on this to actually try doing this first.

[@Guidje]

damn, nice content!! i wasn't expecting to much (because it's a beginner tutorial) but this is really well done and the host didactic is pretty good

[@edemmarvinkudjo9346]

I love Angular❤

[@djrandomoficial4901]

03:04 is it normal to use 'aria-hidden' together with 'alt' in the html element? semms no sense.

[@alissabrave424]

I did everything same with the tutorial but my logo does not show up, I do not understand where the problem is

[@arthurf.foureauxfoureaux5418]

I´ve faced the same issue. To solve it in angular 18, you must create a public folder on the root of your project and inside it, put the assets folder. Then, on the src of img, put "assets/..."

[@stevofootballhome6786]

the the set up is no longer working. pls assist me with the first step setup

[@MrBingo37]

3:08 header with logo will not compile ,it seems that it does not work with Angular 17+ --------------------------------------------------------- Angular CLI: 17.1.3 Node: 20.11.0 Package Manager: npm 10.4.0 OS: linux x64

[@chowderheadreynolds7325]

I had the same issue. I put backticks ` (on the left upper corner on my keyboard above the tilde) before and after the code in the video and got the logo and heading to appear.

[@jediampm]

Hi, i dont know why you are starting to show only inline templates. At least you should show in home template how to do a no inline template. And i think in any component has too much html, as such you should be separate template in file anyway.

[@CrazyOsi]

not the best idea to create a website about HOMEs and have a HOME-component

[@Eltopshottah]

When generating the home component I get an error ‘Could not find NgModule. Use the ‘-skip-import’ option to skip importing in NgModule…

[@Angular]

You have to generate a standalone component, so include the --standalone flag. That should help

[@Eltopshottah]

@@Angular I made sure to include the -standalone command originally still getting the same error tried a few more times this evening im not sure whats up :/

[@Zeke_Cachi]

i´m getting the same error, there´s a difference between what shows up when you create the angular project with what you see on this video

[@angelmotta]

@@Eltopshottah I had the same issue. I tried with --standalone flag and it worked! I think this error is because the starter code in the first episode include a package.json using angular version 16 and the code shared in this episode the code example include a package.json using angular version 17. I also tried with version 18 and --standalone flag is not needed

[@COOKWITHARMAANNN]

not working angular 17 and above

[@saintmose]

true

[@akucinta2371]

i've try in angular 18, it works

[@tuba-inxs]

Great video! at kzbin.info/www/bejne/iGHRg4tun6llepI , looks like a nested child of , not a sibling.