Angular: getting started

Lesson 01 · 10 min

Component and template

A class + HTML side by side. Angular knows which tag is yours by the selector.

10 minLesson 1 of 8Practice includedAsk AI on any point

In Angular a piece of the screen is a class with the @Component decorator. selector is the tag name, template or templateUrl is the markup, styleUrl the styles. The modern style is standalone: a component lists its own imports, and a beginner can leave NgModule alone.

A standalone component
AI

You can ask about this rule«The template looks at the class fields»

  • app-hello in the parent's HTML inserts this component.
  • Selector names have a dash so they don't clash with ordinary tags.
  • Keep logic in the class and markup in the template. Don't write business rules in {{ }}.
AI

You can ask about this point«Lesson summary»

Check

Lock it in before you move on

  1. 1. What does the selector app-hello do?

  2. 2. Where does {{ name }} get its value?

  3. 3. A standalone component is

PracticeSolve the lesson tasksA few short tasks in the editor. Check your code right away and see where it goes wrong.Start practice