Angular Fundamentals in Angular

Angular Fundamentals is the first chapter of the free Angular tutorial. It starts with what Angular is and takes you to a running app on your own computer.

What each lesson covers:

  • Getting Started: What Angular is, why teams use it, its main features, how it compares with plain JavaScript, Single Page Applications, the Angular tools, installing Node.js and the Angular CLI, creating and running a project, its files and its architecture.
  • Components: What a component is, standalone components, creating components with the CLI, the @Component decorator and its metadata, selectors, templates and styles, inline and external files, and how to render, nest and reuse components.
  • Angular Templates: Template syntax, interpolation, property, attribute, class and style binding, event and two-way binding, template expressions and statements, template reference variables, ng-container and ng-template.
  • Styling Components: Inline and external styles, styleUrl and styleUrls, global styles, style encapsulation and the Emulated, None and ShadowDom modes, the :host and :host-context() selectors, CSS custom properties, and sharing styles between components.

Every page runs real Angular in your browser. Edit the code on the left and see the app on the right.

You need no setup to start. The first half of the chapter runs entirely on this site. The second half shows you how to install the tools and run the same kind of app on your own computer, using Node.js, npm and the Angular CLI. Each lesson ends with exercises that check what your app shows, not how your code is written.

Lessons in this section

  1. Getting Started

    What Angular is, why teams use it, how it differs from plain JavaScript, and how to install Node.js and the Angular CLI, create a project, read its files and run it.

  2. Components

    What a component is, standalone components, creating one with the CLI, the @Component decorator and its metadata, selectors, templates and styles, and how to render, nest and reuse components.

  3. Angular Templates

    How a template connects HTML to the component class: interpolation, property, attribute, class and style binding, event and two-way binding, expressions and statements, reference variables, ng-container and ng-template.

  4. Styling Components

    Adding CSS to components: inline and external styles, styleUrl and styleUrls, global styles, style encapsulation and its modes, the :host and :host-context() selectors, CSS custom properties, and sharing styles.