Angular Basics

What Makes Up an Angular Project?

A generated Angular project contains a src/app folder with components, an entry point (main.ts), and configuration files like angular.json and tsconfig.json. Each feature is usually a folder containing a component's TypeScript class, HTML template, and stylesheet.

Angular file names follow a predictable convention: name.component.ts, name.component.html, name.component.css (or .scss). This convention makes it easy to find related files even in large codebases.

src/
  app/
    app.component.ts
    app.component.html
    app.component.css
    app.config.ts
  main.ts
index.html

main.ts bootstraps the root AppComponent; app.config.ts holds application-wide providers like the router and HTTP client.

Bootstrapping a Standalone Angular App

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

bootstrapApplication(AppComponent, appConfig);

• bootstrapApplication() starts a standalone Angular app without an NgModule.
• AppComponent is the single root component every other component renders inside of.
• appConfig supplies providers such as the router, HTTP client, and change detection settings.
• The CLI generates this structure automatically with ng new.

Angular Basics Cheatsheet

Common building blocks you will use in nearly every Angular file.

Anatomy of a Component

Every component has three parts: a TypeScript class holding data and logic, a template describing the HTML, and (usually) a stylesheet scoped to that component. The @Component decorator ties these three pieces together and registers metadata Angular needs, like the selector.

import { Component } from '@angular/core';

@Component({
  selector: 'app-greeting',
  standalone: true,
  templateUrl: './greeting.component.html',
  styleUrl: './greeting.component.css',
})
export class GreetingComponent {
  userName = 'Ada';
}

The selector app-greeting lets you use <app-greeting></app-greeting> inside any other template.

Standalone Components vs NgModule

Classic Angular required every component to be declared inside an NgModule. Since Angular 17, standalone components are the default approach recommended by the Angular team: each component declares its own dependencies through an imports array, removing the need for module boilerplate.

• New projects generated with recent CLI versions use standalone components by default.
• standalone: true is implied for new components generated with modern Angular CLI, no need to declare it explicitly.
• NgModules still exist and are fully supported, useful for gradual migration of older codebases.
• This course explains NgModules where relevant, but recommends standalone components for new code.

Generating Files With the CLI

Rather than hand-writing boilerplate, most Angular developers generate components, services, and other building blocks with the Angular CLI's generate command (aliased g).

ng generate component user-profile
# shorthand:
ng g c user-profile

ng g service data-store
ng g pipe truncate

Common Mistakes

• Manually creating component files without following the name.component.ts naming convention, breaking tooling assumptions.
• Forgetting to add a required directive, pipe, or component to a standalone component's imports array.
• Mixing NgModule and standalone patterns inconsistently within the same feature.
• Editing generated CLI boilerplate incorrectly instead of using ng generate for new files.

Key Takeaways

• An Angular component bundles a class, a template, and styles under one selector.
• main.ts bootstraps the root component that starts the whole application.
• Standalone components are the modern default; NgModules are still supported for legacy code.
• The Angular CLI's generate command creates consistent, correctly wired files for you.