Contents
Angular
Google’s framework for large applications: components, signals, services, routing and forms.
1.Getting started
- What Angular isThe Angular framework: what an application is made of, how it differs from libraries and when to choose it.
- Installation and a new projectInstalling the Angular CLI, creating a project with ng new and a tour of its folders and files.
- ng serve and CLI commandsThe ng serve development server, generating files with ng generate and other Angular CLI commands.
- ComponentsWhat an Angular component is made of: the class, the @Component decorator, the template and styles, and how to put a component on the page.
2.Templates and signals
- Template syntax and interpolationHow to show component data in a template: interpolation, expressions, method calls and template limits.
- Property and event bindingSquare brackets pass a value into an element property, parentheses subscribe a method to an event.
- Signals: signal, computed, effectAngular's reactive values: a signal holds data, computed derives new values from it, effect runs an action on change.
- Control flow: @if, @for, @switchConditional output and lists in an Angular template: the @if, @else, @for with track and @empty, and @switch blocks.
3.Components together
- Inputs: input()How to pass data from a parent component to a child with the input() function.
- Outputs: output()How a child component tells its parent about a user action with output().
- Two-way binding: model()How a parent and a child change one value together: the model() function and the [( )] syntax.
- Content projection: ng-contentHow to pass ready-made markup into a component: the ng-content tag, multiple slots and the select attribute.
- Component lifecycleWhat happens to a component from creation to removal: ngOnInit, ngOnChanges, ngOnDestroy and DestroyRef.
4.Services and HTTP
- Services and dependency injectionHow to move shared logic into a service, get it in a component with inject() and what providedIn: 'root' means.
- HttpClient: loading dataSetting up HttpClient, a service for API requests and showing a list of blog posts in a component.
- RxJS basics for AngularThe minimum of RxJS you need in Angular: Observable, subscribe, pipe with operators, the async pipe and toSignal.
- HttpClient: sending data and errorsA POST request to create a post, a loading state and handling server errors in Angular.
- HTTP interceptorsHttpInterceptorFn functions: a shared header for all requests, a request log and registration with withInterceptors.
5.Routing
- Routing: setup and routesRoutes in Angular: the app.routes.ts file, the router-outlet tag, routerLink links, redirects and a 404 page.
- Route parameters and navigationThe /posts/:id route, links with parameters, reading the id with input() or ActivatedRoute and navigating from code with Router.
- Child routes and lazy loadingChild routes with children and a second router-outlet, and loading pages on demand with loadComponent and loadChildren.
- Route guardsCanActivateFn guard functions: how to close a page to guests and redirect them to the login page.
6.Forms
- Template-driven formsAngular template-driven forms: FormsModule, the ngModel directive, submitting with ngSubmit and resetting the form.
- Reactive formsAngular reactive forms: FormGroup and FormControl in the class, formGroup and formControlName bindings, FormBuilder.
- Form validationAngular validators: Validators.required and minLength, error messages, disabling the button and a custom validator.
7.Tools and release
- Pipes: built-in and customPipes format values right in the template: date, currency, uppercase, slice, plus a custom pipe made with ng generate pipe.
- Attribute directivesA custom Angular directive: ng generate directive, an attribute selector, the host property for events and styles, an input parameter.
- Styling and view encapsulationComponent styles and global styles, class and style bindings, the :host selector and ViewEncapsulation modes.
- Testing basicsThe ng test command, .spec.ts files, testing a service with TestBed.inject and a component with TestBed.createComponent.
- Building and deployingThe ng build command, the dist folder, base href, environment files and server setup for a single-page application.