Learn to style the header component in Angular by linking header.component.css, updating global styles and fonts, and adding a logo image from assets with proper angular.json assets configuration.

Learn to listen to user input in Angular by binding a click event in the template, invoking a component method, and logging output to the console.

Manage state in angular by updating the user interface when a user is clicked, changing the selected user, and recalculating a new random index to refresh the displayed user.

Explore how Angular's change detection automatically tracks data changes in component properties, updates the DOM through the template, and uses zone.js to listen for user events and timers.

Learn to build flexible, reusable angular components by rendering a list of users with a single reusable UserComponent, configurable via attributes, to display multiple users with different data.

Learn how TypeScript enforces strong static typing to prevent runtime errors by handling possibly undefined values with exclamation marks, question marks, and union types.

Enhance the demo app by adding a tasks section and a reusable app-task component, generating components with the Angular CLI and styling with task.component.css to show Emily's tasks.

Enable deleting tasks by emitting a complete event from the task component when the complete button is clicked, then filter tasks in the tasks component to remove the completed one.

Create a dedicated service to manage shared task data across components. Move task logic from the tasks component to a tasks service, with methods like getUserTasks, addTask, and removeTask.

Explore Angular essentials, including components, bindings (interpolation, property, event, two-way with ngModel), template features (@if, @for, ng-content), forms with ngSubmit, and services via dependency injection.

Learn how to migrate from standalone components to a module-based Angular app by configuring AppModule, declarations, and bootstrap, and bootstrapping with platform-browser-dynamic as the root component.

Learn to create and bootstrap Angular modules, register standalone and non-standalone components, and mix modules with standalone components while migrating a demo app.

Learn how to build complex module-based Angular app structures by creating a tasks module, exporting key components, and resolving cross-module dependencies with common, forms, and shared modules.

Learn to implement two-way binding in Angular forms by using the ngModel directive, wiring input elements to component properties, and managing initial values and names to capture user input.

Master cross-component communication in Angular by emitting an event from the user input to the app component, sending a data object with initial investment, duration, expected return, and annual investment.

Create an investment results component to display a dynamic table of yearly investment data, with fallback text, using an Angular input to receive an array of results from the parent.

Learn to manage data in an angular service using signals. Declare resultData as a signal, update with set, and expose a read-only signal via computed or asReadonly for components.

Break up complex markup into reusable components by creating a shared dashboard-item component that wraps common header markup, enabling reuse across server status, tickets, and traffic components.

Define content projection fallbacks with ng-content to display a default icon when no content is provided, and learn how Angular supports this while IDEs may flag older version errors.

Learn how to scope CSS to Angular components by moving global styles from styles.css into component-specific css files, migrate styles, and manage breakages during migration.

Learn to use the host property in the component decorator to automatically add key-value attributes, like class, to host elements across all app-control instances, reducing duplication.

Inject ElementRef to access the host element programmatically in Angular, inspect its nativeElement properties, and log or read information, while preferring data-driven template updates over direct DOM changes.

Explore Angular dynamic inline style binding using [style] and [style.fontSize], including object and string forms, dash-to-camel case conversions, and a height percentage bound in a traffic component div.

Learn how to extract input values with template variables in Angular forms, passing only the title and ticketText as strings to onSubmit and handling extraction in the template.

Explore template variables in Angular forms: access dom elements or component instances, and see how a button becomes a button component instance with the app button attribute.

Explore decorator-based queries with view child and content child in Angular, and master after view init and after content init hooks to access selected elements reliably.

Employ custom outputs in Angular by emitting an add event from the new ticket form, sending a ticket object with title and text, and updating the tickets array.

Learn to add a collapsible ticket details feature in angular using signals to manage a details visible state, toggle it with set or update, and trigger on click.

Explore directives as enhancements that add behaviors to elements in templates, like NgModel for input handling and two-way binding. Distinguish directives from components, which bring their own templates.

Explore how the built-in ngModel attribute directive enables two-way binding and dynamic class management on input elements, illustrating how Angular enhances inputs with ngModelChange and ng-untouched/ng-touched states.

Explore how structural directives render content conditionally with @if in Angular 17, using an auth service and isAdmin logic to show admin content, compared to ngIf.

Create a custom structural directive in Angular that renders content by user status, using an input userType and the auth service with activePermission to drive DOM via the Effect function.

Create a custom structural directive by using ng-template, templateRef, and viewContainerRef to create embedded views and conditionally render or clear content in the DOM based on auth status.

Explore how the asterisk acts as syntactic sugar for ng template, enabling property binding and TypeScript evaluation. See shorter syntax conditionally render content with app auth and CSS classes.

Learn to configure pipes by accepting input and output types for Celsius and Fahrenheit conversions and symbols. Pass arguments with colon syntax in templates and combine with the decimal pipe.

Explore services and dependency injection in Angular, build a new service, and examine hierarchical injection, how it resolves requests, and injection tokens and values to provide services to components.

Learn how to share a single TasksService instance across components in Angular by using dependency injection, instead of creating separate class instances in NewTaskComponent and TasksListComponent.

Explain how Angular's element injector requests a service and cascades up to environment, module, and platform injectors, using @Injectable with providedIn root, ending with injector errors when no provider exists.

Register an injectable value with Angular’s element injector to scope a service to a component’s element tree, using the providers array to share one instance among task components.

Explore how the element injector registers values per component, creating isolated service instances, and contrast it with a root-provided service that shares state across the app.

Learn how to inject a non-service value via a custom injection token named task status options, provide it with use value, and render its options dynamically in Angular components.

Explore how Angular modules (NgModule) use dependency injection by configuring a providers array in app and feature modules, bootstrapping with bootstrapModule, and merging module injectors for scalable, lazy-loaded architectures.

Explore Angular's change detection mechanism, including the OnPush strategy, the role of ZoneJS, and the impact of signals, with a theory-focused look using a dummy app to improve performance.

Discover how Angular's default change detection traverses the component tree via zone.js, reevaluates template bindings, updates the DOM, and logs each binding check, with tips to avoid expensive getters.

Explore sharing data across Angular components using signals with OnPush, injecting a MessagesService to add and read messages via a read-only signal, and considerations when migrating to non-signal services.

Discover how angular's async pipe automatically subscribes to a subject or observable, updates the template with new values, triggers change detection, and unsubscribes when the component is inactive.