VisaSpark
Sign in
intermediate18 min

Angular Fundamentals: Components and the CLI

What Angular is, the CLI/build model, and a component's basic shape.

What you'll learn

  • Explain what Angular is and how the Angular CLI builds a project
  • Describe a component's basic parts: a TypeScript class, a template, and a decorator
  • Distinguish Angular's component model from a plain HTML/JS page

Explanation

Angular is a full, opinionated framework (not just a library) for building single-page applications, maintained by Google. It's TypeScript-first, and comes with an official CLI (ng new, ng generate, ng serve, ng build) that scaffolds a project, generates components, and manages the build pipeline -- a real Angular project genuinely needs this build step, which is why this platform can't safely run one live in your browser (see this course's guided-lab notice on every lesson).

A component is Angular's basic building block: a TypeScript class decorated with @Component, paired with an HTML template. A minimal component looks like:

@Component({
  selector: "app-greeting",
  template: `<p>Hello, {{ name }}!</p>`
})
export class GreetingComponent {
  name = "world";
}

The @Component decorator's selector (app-greeting) is how you use this component elsewhere as a custom HTML element (<app-greeting></app-greeting>), and {{ name }} in the template is interpolation, displaying the class property's value -- covered in more depth in the next module.

Since this platform doesn't build real Angular apps, most guided labs in this course focus on predicting the computed value of a small, isolated piece of component or service logic (a method body, an RxJS chain) rather than full rendered HTML, and always say so explicitly.

Guided lab

Predict: A component's computed property

AngularNot executed
This lab does not run in your browser or on VisaSparkSchools's servers. Read the code, predict what it does, then reveal the real expected output.

This predicts a computed TypeScript value inside a component class, not rendered HTML output (this platform can't render a full Angular template). Read the class and predict the value of greeting.

export class GreetingComponent {
  name = "Ada";
  timeOfDay = "morning";

  get greeting(): string {
    return `Good ${this.timeOfDay}, ${this.name}!`;
  }
}

const component = new GreetingComponent();
console.log(component.greeting);

Stuck? Get a hint.

Common mistakes

  • Assuming Angular is a small library you can drop into a page like a script tag -- it's a full framework with its own build pipeline and CLI.
  • Forgetting the @Component decorator's selector is what makes a component usable as a custom HTML element elsewhere.
  • Confusing Angular (this course, modern/current) with AngularJS (a separate, much older, end-of-life framework covered in a different course) -- they are not versions of the same thing in any practical sense today.

Knowledge check

Knowledge check

1. What generates a new Angular project's scaffolding and build pipeline?
2. What does the @Component decorator's selector control?
3. Is AngularJS an older version of the Angular covered in this course?

Takeaway

A component is a TypeScript class decorated with @Component, paired with a template -- and modern Angular is a distinct framework from the much older, end-of-life AngularJS.

Summary

Angular is a full, CLI-driven, TypeScript-first framework; components (a decorated class plus a template) are its basic building block.

References

Your notes

Notes save automatically.

Finished this lesson?

Mark it complete to track your progress and schedule a future review.

Next: Templates and Data Binding →