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:

#Angular

[elyoaprogrammer]

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

[piragna]

I love the tutorials! It is very helpful! Thanks!

[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.

[TrashCanSystem]

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

[djrandomoficial]

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

[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

[Chagorthebarbarian]

Does anyone know what theme they are using? I'd like to use it myself.

[MrBingo]

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

[alissabrave]

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

[darksorcerer]

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

[stevofootballhome]

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

[Eltopshottah]

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

[FredMorrison-if]

In late November 2024, using Angular 19.0 in VSCode 1.95.3, the following line comes up with an HTTP 404 (not found) while looking for the asset logo.svg in the app component:
1. FAILS: <img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true">
2. FAILS <img class="brand-logo" src="assets/logo.svg" alt="logo" aria-hidden="true">
3. FAILS: <img class="brand-logo" src="./assets/logo.svg" alt="logo" aria-hidden="true">
4. FAILS: <img class="brand-logo" src="~/assets/logo.svg" alt="logo" aria-hidden="true">
5. FAILS: <img class="brand-logo" src="~assets/logo.svg" alt="logo" aria-hidden="true">

The assets folder is underneath the src folder, just like in the starter code, so I am at a loss to understand why the logo only shows the alt text and the browser console shows HTTP 404.

Any clue as to why this is happening?

*** UPDATE ***

The fix is as follows:


"assets": [
"src/assets", ADD THIS LINE TO angular.json
{
"glob": "**/*",
"input": "public"
}
],

Once you add the path to your assets to `angular.json`, the <img src="assets/log.svg" > starts to work correctly.

[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

[michaelhill]

At 2:43 he says "sibling element" when it is a child element. I am old school. I believe people should review before publishing mistakes. It is distracting.