The complete Angular Course , Typescript included.

Understand angular, a JavaScript framework for single-page apps, which bundles hundreds of files into a few html, css, and js files, and follows a version history from 1 to 8.

Create a new Angular project quickly with the CLI, install Node and npm, choose routing and CSS styles, and run ng serve to view on localhost.

Angular uses TypeScript as an add-on to JavaScript, providing intelligent error checking and cleaner code, with TypeScript as a typed superset that compiles to JavaScript.

Explore the Angular file structure, focusing on the source directory as the app home, and how index.html and the app root guide bundling and assets.

Learn to set up an Angular app by creating an app module, importing the browser module, configuring declarations, imports, providers, and bootstrap, with TypeScript checks and compile feedback.

Explore building an Angular app with a main app component as root and the energy module. Use a decorator to set selector and templateUrl, declare and bootstrap components.

Explain how Angular components include a dedicated CSS file that only affects their HTML, while global styles apply application-wide, and how to add external libraries like Bootstrap via angular.json styles.

Learn to create Angular components with the CLI, generating header and content components, including nested components inside a folder, and skip test files to streamline setup.

Link and nest angular components by moving content into header and cars components, use selectors to render children, apply bootstrap styling, and reuse components across a single-page application.

Learn to use angular components with inline templates or template URLs, and choose between element, attribute, or class selectors while managing lint considerations and project size.

Explore how Angular isolates component styles with view encapsulation, compare per-component and global CSS, disable encapsulation to apply shared styles, and use inline styles in component decorators.

Learn how Angular components exchange data between the TypeScript file and HTML using interpolation, property binding, and event binding to render content on screen.

Explore interpolation in Angular to bind component properties like name and model to the template, and learn type-safe checks with inference and explicit annotations.

Explore property binding in angular by binding href and target with square brackets, and compare to interpolation. See dynamic updates reflect and booleans control disabled and hidden properties.

Learn to catch user events in Angular by binding click events, handling mouse enter and leave, and using the event object with clientX and clientY.

Learn how to handle form events in Angular by capturing input values and submitting a form, with TypeScript typing and a peek at a simpler built-in approach.

Learn to bind form inputs with ngModel in Angular using the forms module, updating component properties in real time and simplifying form data handling.

Learn how to pass data from a parent component to a child in Angular using the input decorator, wiring a car object with name, model, and color.

Learn how to pass data from a child to its parent in Angular by emitting a car submitted event with an event emitter and output.

Create a local reference on an input, access its value, and share the reference with a child component through an input property to pass data between components.

Use the view child decorator to access a dom element or child component via a local reference, and leverage static true with after view init to access car values.

Demonstrates content projection with ng-content and how content child and view child decorators access projected content, using lifecycle hooks such as after content init to read inner elements.

Introduce angular lifecycle hooks and explain the order of ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked, and ngOnDestroy.

Learn how to create an Angular component, explore the component lifecycle with constructor, ngOnInit, and ngOnChanges, and use input binding with a parent-to-child example and simple changes.

Learn angular lifecycle hooks: implement DoCheck for every change detection, explore OnChanges, and review AfterContentInit, AfterContentChecked, AfterViewInit, and AfterViewChecked.

Explore Angular lifecycle hooks such as ngAfterViewInit and ngAfterViewChecked, and use ngDoCheck and ngOnDestroy to manage component lifecycles. Learn to control rendering with ngIf and a show boolean flag.

Explore the two main types of directives in Angular—attribute directives that change appearance or behavior, and structural directives that modify the DOM. Learn to use built-in directives.

Explore ngIf as a structural directive in Angular and learn to toggle DOM elements with star and expanded syntax. Compare ngIf with the built-in hidden directive for dynamic display control.

Explore NgStyle, an Angular attribute directive for dynamic inline styles. Bind colors and font sizes with object notation, including units, ternary logic, and function returns to control styling in templates.

Explore how to manage classes in Angular using ngClass and the [class] syntax. Learn to merge multiple classes with boolean checks, object notation, and ternary expressions.

Learn to use the ngFor structural directive to loop over arrays and objects in Angular, render each item, and access its index in real time.

Learn to implement ngSwitch in Angular, using structural directives to show or hide content, handle default cases, and filter a coffee list with ngFor by availability.

Create a custom attribute directive in Angular, define a directive with a selector, declare it in the app module, and use ElementRef with ngOnInit to modify the element’s style.

Learn how Angular uses Renderer2 to safely modify element styles and classes, instead of direct DOM manipulation, using setStyle, addClass, createElement, and setAttribute.

discover how the host listener decorator in Angular handles events like click and mouseover, access event data, and modify the element's style.

Explore host binding in Angular, using a decorator to access an element's style and set its color, compare with host listener, and prepare for forwarding arguments to directives.

Pass arguments to Angular directives using input properties to control color and disabled state, and handle clicks with host listeners for reusable directive behavior.

Explore structural directives in Angular by replicating an if directive, using template references and a view container to conditionally render content with a boolean input.

Create an angular carousel directive named carousel, pass an items array of strings, render each item with a context and implicit value, and expose a controller with next and previous.

Finish the directive by implementing carousel index logic in plain JavaScript, wrapping at array ends, and updating the implicit context. Enable autoplay and delay via input setters that parse arguments.

Install and use Augury to inspect Angular apps, view modules, components, router tree, and component state to debug complex component hierarchies.

Build a web-based magic eight ball app named Decide app in Angular, featuring a three-stage flow with custom and preset answers and a JSON-driven engine.

This Angular course lecture guides building a multi-component app by sharing a central app values object, using input/output, event emitters, and a TypeScript interface to control panel visibility.

Assemble an input form in Angular, capture user questions via a reference, emit a next event to the parent, and update a copied app state while planning centralized error handling.

Learn to implement error handling in an Angular app by defining an errors interface, emitting has errors from child components, and displaying and auto-clearing alerts.

Create two Angular components to present a question with a button, copy app values, and emit results to advance to the third stage, using inputs, outputs, and an errors interface.

Learn to build three Angular components that show a question and a random answer, emit results to the app, and support start over and don't like it flows.

Add custom answers by toggling mode, showing a form, and emitting updates to the app; validate at least two custom answers and render pills.

Switch three Angular components to handle default versus custom answers using pure JavaScript. Create a custom array, emit results, and test the mode behavior with default, custom, and random answers.

Build the angular app to generate a dist directory, then deploy only the dist files to a static hosting service, using the provided deployment options and domain setup.

Discover how services centralize reusable functions across components with a shared helper class. Build a small zero two services project to test a two-component template with inputs and outputs.

Create an Angular project with two components—a user input and a list—to build a bootstrap-styled to-do style app, wiring data with input and output.

Learn to delete and add items in an Angular app by passing index from list items to the app component using an event emitter, and updating the user list accordingly.

Create and use an Angular service by placing it in a providers array and injecting it via the component constructor, ensuring Angular manages the instance instead of direct new.

Learn how to share a single Angular service across components using hierarchical dependency injection, by providing it at the parent or app module level for global access across the app.

Refactor the app by using a user service to manage the list of users, fetch data on init, and handle add and remove operations.

Inject a second service into the user service with the injectable decorator and constructor, and configure it as provided in root to enable logging via the console log service.

Explore observables in RxJS and how Angular uses them, explaining what an observable is with raw code, a simple HTTP request example, and the Angular integration of RxJS features.

Learn to create and use observables in Angular: install an external library, import observable, emit values with next at set intervals, subscribe to observe data, and understand the three stages.

Subscribe to an observable to get three stages: handle data, handle error, and handle complete; trigger next for data, trigger error for error, and trigger complete for observable flow.

Learn how to unsubscribe from observables in Angular by storing the subscription and cleaning up on destroy, preventing memory leaks, and noting that built-in Angular observables don't require manual unsubscribe.

Learn how Angular uses built-in observables, event emitters, and services to emit events, subscribe to data, and share state between components.

Explore new RxJS features beyond observables, including range, interval, timer, from event, and pipeable operators; learn how to create, transform, and subscribe to streams in Angular.

Explore Angular routing in a single-page app by building a root project with home, users and games routes, nested profiles and posts, and integrating bootstrap.

Configure Angular routes by importing the router module, defining a routes array with path and component, using forRoot, and routing to home, games, and users via router outlet.

Learn to navigate Angular routes using the routerLink directive and the navigate method, including relative to activated root to keep navigation within the current component and avoid full page reload.

Learn to use dynamic parameters in Angular routing with activated route, snapshot, and params to load a post by id and rating, and subscribe to changes for updates.

Learn to use Angular router query strings with routerLink, query params, and fragments, read them from activated route, and control merging or preserving values during navigation.

Apply an active class with routerLinkActive to highlight the current section, use exact with routerLinkActiveOptions, and switch to an array for multiple classes on nested routes.

Implement nested routes by organizing a main group with children for games and users, rendered through a router outlet and end with a star wildcard for not-found routing.

Pass data to routes by using the data property and accessing it through the activated route snapshot to retrieve the title, and learn how to use canActivate to guard routes.

Secure Angular routes with a canActivate guard using a login service and an observable to permit or block access to routes like /games.

Learn how canActivate and canActivateChild guard routes in Angular, using router and state snapshots to return booleans or observables, gating child navigation by authentication.

Learn how the can deactivate guard protects routes by prompting and blocking navigation, implemented as a service with an interface and applied to a component to control leaving a route.

Watch how the CLI creates a project with routing, adds an app routing module, and wires RouterModule.forRoot with roots, then adds a home component and adjusts the root setup.

Discover Angular forms by comparing template-driven and reactive approaches; template-driven handles simple HTML forms quickly for login or signup, while reactive forms offer robust, scalable controls managed in TypeScript.

Learn template-driven forms in Angular by wiring inputs with ngModel, importing the forms module, and using a local form reference to access data and controls.

Demonstrates template-driven validation in Angular forms using validators like required and email, shows error messaging and styling, and disables the submit button when the form is invalid.

Demonstrate template-driven binding and two-way binding by rendering dynamic age options from a component array and binding values in a form group for submission.

Learn to create groups in Angular forms with form group and ngModel group, tailoring objects like a user profile, and manage controls, validation, and conditional display.

Set value and patch value methods control template driven and reactive forms, enabling default values and partial updates while highlighting when to use each approach.

Access and submit template-driven form values to the server, using patch value and set value to tailor data. Reset the form when needed, and switch to the reactive approach.

Build reactive forms in Angular by defining a form group with name, email, and work controls, binding it to the template, and logging personalForm.value on submit.

Learn how to implement reactive form validation in angular, using built-in validators and custom rules, manage form controls and error objects, and display validation feedback to users.

Display errors in reactive forms by accessing the personal form group with get for name and email, checking valid and touched, and using controls with array notation for required errors.

Learn how to implement r-grouping in Angular forms by building nested form groups for a user profile, including name and email, and resolving common validation and access issues.

Learn how to implement radio groups and checkbox lists in Angular forms using form control and form array. Build a dynamic abilities array that yields booleans and captures submitted values.

Explore how value changes and status changes behave as event emitters in reactive and template driven forms, subscribe to observables, and use setValue, patchValue, and the form builder.

Use the form builder to create groups, arrays, and controls with validations in Angular. Configure a private fb instance and leverage fb.group and fb.array behind the scenes.