Angular Deep Dive - Beginner to Advanced (Angular 22)

Explore angular components and core directives, work with a starter repository from GitHub, install dependencies with npm, run the dev server, and explore the angular component API.

Learn to build your first Angular component by scaffolding a course card with the Angular CLI, turning HTML into a reusable custom element and wiring configurable inputs.

Discover how to pass data into Angular components with @Input and square-bracket binding, by passing a course object with title, description, and icon, plus how required inputs trigger compile-time errors.

Learn how Angular components pass inputs and emit custom events with @Output and event emitters, handle event payloads, and manage bubbling between child and parent components.

Learn the Angular 17 template control flow primitives at for, at if, and at switch, and see how they replace older ng for and ng switch in templates.

Explore the Angular 17 @for syntax, learn to loop through a list of courses with a tracking function to uniquely identify elements, and understand how Angular optimizes DOM updates.

Explore angular's add for syntax, including add empty, dollar index, first, last, even, and odd, to index, count, and style elements.

Understand why the Angular 17 @for tracking function is mandatory and how it enables efficient DOM updates by diffing lists with a unique identifier such as course ID.

Explore the ngFor directive and its predecessor syntax, learn to loop through data using both options, and compare the benefits of the new ngFor syntax for future projects.

Refactor the template to display the full courses list with the ngFor core directive, looping an array to generate course cards and expose index, first, last, even, and odd.

Learn how to migrate from the old ngFor syntax to the new @for syntax using the Angular CLI automated migration, which handles about 95% of the work for most projects.

Introduce the @if directive for conditional rendering in Angular, compare it with the Ng predecessor, and outline the recommended modern option for new projects alongside the still-relevant predecessor.

Master Angular 17's active template syntax for conditional rendering, using course cards to display icons or placeholders and applying if, else if, and else logic.

Explore the ngIf directive by comparing it with its predecessor, the NDF structural directive and the NGF, and weigh the pros and cons of both syntaxes, including the Elvis operator.

Learn to use the ngIf directive to conditionally render content, coerce expressions to boolean, and apply the Elvis operator with an else template for graceful fallbacks.

Compare the new if syntax for Angular conditional rendering with the predecessor NGF; the new syntax is less verbose, reads like JavaScript, and migrates NgIf usages automatically.

Apply conditional styles with the ngClass directive in Angular. Use string, array, or object forms and a cardClasses method to activate a beginner class only for beginner courses.

Explore the Angular ngStyle core directive, compare it with ngClass for dynamic styling, and learn to apply multiple styles via a configuration object or a function, including dynamic background images.

Explore the Angular @switch template syntax for conditional rendering. Compare it with the switch case statement and Ng switch directive, and learn its migration benefits.

Explore the angular 17 @switch syntax in templates to render badges for course categories using case blocks and a default case.

Learn to use the Angular ngSwitch core directive to display course category labels (beginner, intermediate, advanced) with a default all levels, comparing to ngIf.

Master the Angular core ng-container directive to apply structural directives without extra wrappers, using ng-container as a template hook for ng switch and multi-element cases.

Master angular built-in pipes for templates, transforming dates, strings, numbers, and currencies. Explore date, percent, uppercase, lowercase, title case, slice, json, and key value pipes.

Learn how to use Angular's ViewChild and ViewChildren decorators to query template elements from a component class, handle single and multiple matches, and access element references.

Explore the ViewChild decorator's multiple query options, including component class queries, template references, and plain HTML elements, with practical demos and the after view init lifecycle hook.

Explore the after view init lifecycle hook to access view child references after they populate, and understand why querying is limited to the current component template, not deeper hierarchies.

Explore the view children decorator to query a collection of elements in an Angular template, using a query list and the changes observable after view initialization.

Explore content projection in Angular, using ng-content to create configurable course card components, with aliasing, selector-based slots, and multi-slot projection for images, descriptions, and remaining content.

Explore the content child decorator and how it enables querying projected content in Angular, beyond view child, including template references and component instances in the content.

Explore Angular content children and the after content init lifecycle to query multiple projected elements, using content child and content children, and compare with view child approaches.

Explore angular templates and ng-template basics, using ngIf for conditional content and template references to render a blank image with a default image while understanding variable scope and template instantiation.

Explore Angular templates by instantiating templates with ng template outlet, supplying a private context using let variables, and reusing templates across components through input context and ng container.

Learn to pass a template as an input to a course card and render it with ng template outlet, using an isolated context to show the course name and description.

Learn how Angular attribute directives modify element behavior and appearance, build a custom directive with a highlighted attribute, and apply it to components like course cards using Angular CLI.

Discover how an Angular directive uses host binding to modify the host element’s DOM properties and attributes, applying and toggling the highlighted class and border style through an input.

Use the host listener to respond to native dom events, toggle the highlighted state on hover and mouse leave, and emit a toggle highlight event for reusable directives.

Learn the directive exportAs syntax to expose a directive via a template reference, call its toggle method to control isHighlighted and emit events, and access it with viewChild.

Explore Angular structural directives and build a custom ng unless directive that inversely controls template rendering using the star syntax, ng template, and template variables.

Explore implementing an Angular structural directive that instantiates a template via a view container, rendering an embedded view on demand based on a condition, with an unless logic.

Explore how Angular view encapsulation isolates component styles by applying unique content attributes, transforming global CSS into component-scoped styles for each course card.

Explore Angular default view encapsulation and the host selector, using colon host with ng-host attributes to style the component host and move styles into the component stylesheet.

Explore how ng-deep bypasses Angular view encapsulation to style elements delivered via content projection, enabling course card descriptions to maintain scoped CSS while applying global styles.

Explore the host context selector to style a component based on external theming, such as applying a salmon background to course cards, while understanding Angular view encapsulation.

Compare Angular default emulated view encapsulation with shadow dom, none, and native options, and see how host context and global stylesheet influence component isolation.

Explore the Angular Http service and the back-end service layer, wiring the app to a REST API and replacing hard-coded data with API data in the UI.

inject the angular http client, perform a get request to /api/courses, subscribe to the observable, and add query parameters with http params to fetch paginated data.

Explore the async pipe in Angular to implicitly subscribe to observables, display backend data like courses, and prevent memory leaks by unsubscribing automatically when components are destroyed.

learn to build a custom angular service with the injectable decorator, register it with providedIn: root, and leverage dependency injection to share a singleton course service across components.

Create a courses service with a load courses method that returns an observable of course array, fetching data via the Http client. Centralize Http logic to enable reuse across components.

Learn to modify course data with an http put via a custom Angular service, update the UI through a courseChanged event, and pass optional authentication headers to save updates.

Explore angular's dependency injection system, where services are injected via constructors and providers with factory functions enable the courses service, avoiding manual instantiation and simplifying testing in nested components.

Explore how to write a custom provider to supply a courses service, and learn how Angular's dependency injection uses an injection token, useFactory, and dependencies to create and inject services.

Angular uses class names as injection tokens, letting the runtime constructor instantiate dependencies without manual providers, enabling simple hierarchical dependency injection.

Explore hierarchical dependency injection by illustrating providers at different component levels, root injectors, and local lifecycles, including singleton and component-scoped services.

Explore tree-shakable providers as an alternative to the providers property, enabling app-wide singletons with provided in root and use factory or use class within injectable, reducing bundle size.

Explore advanced dependency injection by injecting non-class values with injection tokens, such as a global app config, using config token, inject decorator, and tree-shakeable use value providers.

Explore angular dependency injection decorators—optional, self, and skip self—to control hierarchical provider scope, prevent crashes when dependencies are missing, and enforce local or parent-provided services.

Explore the host dependency injection decorator for directives on a course card, and compare host, self, and skip self decorators for controlling dependency sources.

Discover how angular's default change detection runs automatically after events to keep the view in sync with mutable data, and how onpush provides a performance optimization option.

Compare Angular OnPush change detection with default change detection to reveal how event-triggered updates rely on input immutability, object references, and re-renders that boost performance.

Explore onpush change detection with observable streams in Angular. Learn to use the async pipe to push backend data to the template and compare with default change detection.

Explore how the Angular attribute decorator enables one-time binding for fixed input values to reduce change detection overhead, compare with simplified input syntax, and preview custom change detection.

Learn how to implement custom change detection in Angular by using default and OnPush strategies, and manually trigger updates with ChangeDetectorRef, markForCheck, and doCheck.