The Complete Angular Course: Beginner to Advanced

Master the fundamentals of TypeScript and object oriented programming to build Angular apps. Learn type annotations, arrow functions, interfaces, classes, constructors, access modifiers, properties, and modules.

Explore TypeScript as a superset of JavaScript that adds optional static typing and object-oriented features like classes, interfaces, and generics, plus compile-time error checks and transpilation to JavaScript.

Install TypeScript globally and write your first TypeScript program, demonstrating that plain JavaScript is valid TypeScript. Transpile with tsc and see how Angular CLI uses the TypeScript compiler.

Explore TypeScript variable declarations by comparing var and let and their scope in ES5 and ES6. Learn how the TypeScript compiler reports compile-time errors and why let prevents scope issues.

Explore TypeScript types such as number, boolean, string, arrays, and enums, and learn how type inference and annotations prevent runtime errors by compiling to JavaScript.

Learn type assertions in TypeScript to tell the compiler a variable is a string, using angle brackets and as syntax, to preserve IntelliSense without runtime changes.

Discover how to define arrow functions in TypeScript for Angular apps, compare them to traditional function syntax, and write concise one-line functions with optional parentheses for a single parameter.

Design clean function signatures in TypeScript by using point objects and interfaces, avoiding long parameter lists, and applying in-line annotations or a Point interface with Pascal naming convention.

Discover how cohesion unifies related point operations by converting an interface-based design into a point class with x and y fields and draw and getDistance methods.

Explore objects in TypeScript through a point class, covering fields, methods like draw and getDistance, memory allocation with new, and distinguishing objects from classes for practical object-oriented programming.

Learn how to use constructors in a TypeScript class to initialize point objects efficiently, handle required versus optional parameters, and avoid verbose initialization.

Learn how to use access modifiers in TypeScript to prevent outside modification of coordinates by marking fields as private, ensuring predictable behavior and reducing bugs.

Learn how to simplify TypeScript constructors by prefixing parameters with private or public access modifiers to have the compiler generate and initialize fields, reducing boilerplate and controlling field visibility.

Use get and set properties in TypeScript to read and write private fields with validation, like x, while preserving camel casing and underscore prefixes.

Move the point class to point.ts, export it, and import it in main.ts to learn how TypeScript modules organize code across files; also see how Angular modules differ.

Create a TypeScript like component with a likes count and an is selected flag, use a constructor with public parameters, toggle on click to plus or minus one in Main.ts.

Identify a current implementation flaw where likes count and selection state update only through onClick. Enforce private fields with getters and read-only properties in Angular, targeting ES5.

Explore the fundamentals of building Angular applications and gain a basic understanding of components, templates, directives, and services to start creating with Angular.

Explore how components encapsulate data, HTML markup, and logic to build reusable views, and organize them into modules for scalable Angular apps.

Create a component, register it in a module, and render it with a selector in HTML. Define the component with the @Component decorator and add it to the module's declarations.

Use the Angular CLI to generate a component with ng g c course; the CLI creates a course folder with files and registers CourseComponent in app.module, reducing boilerplate and errors.

Explore how Angular uses data binding to connect a component's title field to the template with string interpolation, updating the view automatically as values change.

Display a list of courses using an angular directive to iterate over a courses array. Prefix the directive with * and use let and of to iterate, with string interpolation.

Learn how to fetch the course list from an http endpoint using an angular service. Decouple the component from data access, enable reuse, and support testing with a fake service.

Learn to use dependency injection in Angular by injecting the courses service in the constructor, decoupling the component, and registering the provider in the app module.

Generate an email service with angular CLI using gg and s, producing a service and spec file, and apply the injectable decorator to support dependency injection.

Explore displaying data on your views, applying dynamic classes and styles to dom elements, formatting data with pipes, and handling events raised from the dom element.

Explore how interpolation translates to property binding, binding a DOM property like image source to a component field using square brackets, and learn when to use interpolation versus binding.

Learn how property binding works in Angular, distinguish between DOM properties and HTML attributes, and bind the colspan attribute using ATTR to fix the error.

Learn how to add Bootstrap to an Angular application by installing Bootstrap with npm, importing its CSS into styles.css, and applying Bootstrap classes like btn and btn-primary for a look.

Bind classes dynamically in Angular using class binding to add or remove an active class based on a component field isActive, while preserving base classes btn and btn-primary.

Apply style binding to conditionally set a button's background color using a style object. Use isActive to switch to blue or white, illustrating style binding alongside property and class binding.

Master event binding in Angular by handling click events, accessing the DOM event object with $event, and controlling propagation with stopPropagation to manage bubbling.

Learn how to use event filtering in Angular to trigger on enter key during keyup, replacing keyCode checks with the enter filter for cleaner event handling.

Explore two Angular approaches to read input values: use the event object to access event.target.value, or declare a template variable to access input.value.

Explore two-way binding in Angular, moving from procedural parameter passing to component encapsulation, using banana in a box syntax with ngModel and learning to import FormsModule for forms support.

Format data in Angular with built-in pipes like uppercase, lowercase, decimal, currency, and percent, and learn to create and chain custom pipes.

Implement a custom Angular pipe named summary that implements PipeTransform to summarize long text in templates. Register SummaryPipe in app.module and use an optional limit to control length.

Learn to build reusable Angular components, pass data to them, raise custom events, apply styles, and explore Shadow DOM and view encapsulation.

Expose input and output properties to enable property and event binding, making the favorite component reusable by defining a public API and linking it with the host component.

Learn two ways to mark input properties in Angular: using @Input and the component metadata approach, with a live binding of post.isFavorite and the risk of magic strings.

Alias input properties to keep a stable API and minimize breakages when renaming fields, using an alias like is-favorite to decouple internal names from templates and support reusable components.

Explore Angular output properties by turning a favorite component into a clickable element that emits a change event via EventEmitter, binding onFavoriteChanged in the host component, and logging 'favorite changed'.

Pass data with Angular events by emitting a change event from the favorite component. Send a boolean or object as eventArgs, and use an interface like FavoriteChangedEventArgs for type safety.

Use aliasing on output properties to keep a component's API stable when renaming events, so the consumer app continues to handle events like change or click without breaking.

Learn when to use inline versus external templates in Angular components, especially for templates longer than five lines, and how these templates are bundled with the main bundle.

Learn three ways to apply styles to an Angular component: styleUrls, styles, and inline template styles. See which style wins and how Angular scopes styles to the component.

Explore how Shadow DOM provides style encapsulation and how Angular's view encapsulation emulates it with ngcontent attributes to scope component styles, comparing emulated and native modes.

Learn to create a reusable bootstrap panel in Angular using ng-content for content projection with two injection points, heading and body, identified by .heading and .body.

Discover how ng-container enables cleaner markup in angular by using a .heading selector with ng-content, replacing wrappers at run time to render the panel heading without extra divs.

Explore Angular built-in directives such as ngFor, ngSwitch, ngClass, and ngStyle, and learn how to build custom directives to render lists and apply dynamic styles.

Learn how to conditionally render content with Angular ngIf, using structural directives, ng-template, and template variables to display a course list or a no courses message.

Compare the hidden attribute and ngIf for showing or hiding sections, with hidden keeping elements in the DOM and ngIf removing them. Consider change detection and memory usage on trees.

Learn how to implement multiple tabs using ngSwitchCase in Angular, switching between map view and list view with dynamic content, viewMode binding, and active state.

Learn how the ngFor directive renders a list of course objects, exposing local values like index, first, last, even, and odd, and using interpolation and ngIf to highlight even rows.

Explore how the ngFor directive responds to changes in component state by adding, removing, and updating courses. Observe how change detection updates the DOM after onAdd, onRemove, and onChange actions.

Learn how ngFor tracks list items by identity and how trackBy with a trackCourse method uses course id to prevent unnecessary re-renders, especially for large lists.

Explore how the leading asterisk rewrites ngIf, ngFor, and ngSwitchCase with ng-template, and uses property binding and the not operator to invert conditions like courses.length > 0.

Explore using the ngClass directive to toggle multiple css classes with a bound object, replacing separate class bindings and conditionally rendering glyphicon-star and glyphicon-star-empty based on isSelected.

Explore ngStyle in Angular, using a bound object to toggle background color, text color, and font weight based on canSave, and compare inline styles with class-based styling.

This lecture shows guarding against null or undefined nested objects in angular templates with the safe traversal operator, preventing errors when accessing properties like name.

Create a custom Angular directive to format user input, using HostListener for focus and blur, ElementRef for the host, and an optional input or selector-based formatting.

Build and validate Angular forms by adding text boxes, check boxes, radio buttons, and drop-down lists. Display validation errors beside inputs and disable submit when invalid.

builds a simple bootstrap form and adds angular validation, using a contact-form component with bootstrap form-group and form-control classes, a text area for comment, and a submit button.

Learn to validate Angular forms using FormControl and FormGroup, track input state, compare template-driven and reactive forms, and unit test complex validation logic.

Explore template-driven forms with ngModel in angular, showing how ngModel creates a form control and why a name attribute is required for validation and state tracking.

Enforce a required first name field using HTML5's required attribute and Angular's ngModel, ngIf, and form control validity to show a bootstrap alert-danger only after the field is touched.

Apply html5 validators in angular, such as required, minlength, maxlength, and pattern, to enforce input constraints and render error messages with ngIf using the errors object and dynamic minlength feedback.

Highlight invalid input fields to improve form usability by styling ng-invalid, ng-dirty, and ng-touched states with a red border for form-control inputs.

Improve Angular templates readability by formatting form attributes on separate lines, prioritizing validation attributes and ngModel, and clearly presenting validation errors with ngIf for easier maintenance.

Learn how the ngForm directive creates a FormGroup and FormControl for a form, exposes properties like valid, invalid, and value, and enables submission with ngSubmit and a template reference f.

Use ngModelGroup to structure complex nested form data as a hierarchical object; group fields under contact and validate the entire group with a template variable.

Understand how FormControl tracks a single input and FormGroup tracks a form. Learn how ngModel creates FormControl, ngForm links to a form's FormGroup, and ngModelGroup handles subgroups without ngSubmit.

Learn to disable the submit button until the form is valid by binding the disabled state to the ngForm validity (f.valid). A valid first name enables submission.

Learn how to add a checkbox to an Angular form with bootstrap, using ngModel and a name isSubscribed, label it subscribe to mailing list, and view the values as json.

Learn to create dynamic drop-down lists in Angular forms by binding a select with ngModel, rendering options with ngFor, and using ngValue for complex objects, including empty and multiple selections.

Explore creating and grouping radio buttons with bootstrap markup, using a shared name and ngModel; render them dynamically with ngFor from contact methods like email and phone.

Build reactive forms in Angular by explicitly creating control objects in code, enabling dynamic forms, and supporting custom and asynchronous validation, including username uniqueness checks against the server.

Attach a signup form component, register signup-form in app.module.ts, and render it in app.html to display a bootstrap form with username and password; next lecture converts it to Angular form.

Convert a bootstrap signup form to a reactive Angular form by explicitly creating FormGroup and FormControl instances, wiring inputs with formGroup and formControlName, and importing ReactiveFormsModule for validation.

Add validation to reactive forms by applying Validators (required, minlength, maxlength, pattern, email) to form control objects, access via form.get and a getter, and render error messages.

Learn to apply multiple validators to an angular form control using an array, including required and minLength, and display specific error messages in the template.

Implement a custom validator function in Angular forms by encapsulating static validator methods in a dedicated UsernameValidators class, returning validation errors or null.

Create a custom Angular username validator shouldBeUnique to simulate a server check for 'mosh'. Learn asynchronous, non-blocking validation with setTimeout and why async validators need a different signature.

Learn how to implement Angular async validators by returning a promise or observable, register them on a FormControl as a third argument, and display errors like username is already taken.

Display a loader while an Angular async validator runs by using the FormControl pending property with ngIf to show a loader icon during server validation.

Validate a login form on submit by wiring ngSubmit to a login method, simulate server checks with an authService, and set form-level errors using form.setErrors on AbstractControl.

Create a nested form by moving username and password into a subgroup named account, then access them with account.username via FormGroupName and FormControlName.

Learn how to manage an array of topics in an Angular form using FormArray, FormGroup, and FormControl, including adding and removing topics with a dynamic UI.

Learn to build reactive forms in Angular with form group, form array, and form control. Use the form builder via fb.group, fb.control, and fb.array for cleaner syntax and required validator.

Review reactive forms by building a form object as a group with name as a FormControl and topics as a FormArray, then bind using FormGroup, FormControlName, FormGroupName, and ngFor.

Connect Angular applications to back-end services and APIs, perform CRUD operations, and extract a reusable data service for multiple endpoints. Learn to handle errors and apply separation of concerns.

Explore using a fake http service with jsonplaceholder.typicode.com as the back-end for an Angular app, learning to fetch, create, update, and delete posts without a real database.

Fetch data from json placeholder using Angular http, import http module, inject http, call http.get, subscribe to the observable, convert to json, and render posts with ngFor.

Create a new post by entering a title and pressing enter, sending an http post to the server with a json body, and updating the post list with the response.

Explore updating data in an Angular app by using patch versus put, sending only modified post properties via http requests to a specific post URL.

Implement delete functionality in the Angular course by sending an http delete request to the post endpoint with the post id, then remove it from the array with splice.

Move initialization from the constructor to ngOnInit by implementing OnInit, so Angular calls ngOnInit during component initialization and avoids http calls in the constructor.

Explore separation of concerns by refactoring post management into a dedicated service that handles http calls, enabling isolated unit tests and reusable backend logic.

extract a post service with Angular CLI, move http calls from component to PostService, inject the service, and implement getPost, getPosts, createPost, updatePost, and deletePost to ensure separation of concerns.

Learn to handle server call failures in Angular by distinguishing unexpected errors (server offline, network down, unhandled exceptions) from expected errors (not found 404, bad request 400) and display messages.

Handle unexpected errors in an Angular post component by using the subscribe error callback and showing a toast instead of an alert, with a plan for server-side error logging.

Handle expected errors in Angular by annotating the error as Response and checking 404 and 400 statuses, then use form.setErrors(error.json) for field errors.

Enforce separation of concerns by moving HTTP response logic from the component to a service, using RxJS catch to return application-specific errors like not-found errors.

catch errors in the post service, throw app-specific errors for status 400 as BadInput, and surface server validation errors to the form without using status codes.

Import observable operators and factory methods to handle errors, importing catch and throw correctly and understanding static versus instance usage in Angular applications.

Create a global error handler by implementing AppErrorHandler with Angular's ErrorHandler, register it as a replacement provider, and propagate errors to the global handler.

Refactor your Angular post service by extracting a private handleError method to centralize HTTP error handling for 400, 404, and AppError, applied across createPost, deletePost, updatePost, and getPost.

Extract a reusable data service to handle HTTP endpoints by creating a generic DataService, then extend it with specific services using getAll, create, update, and delete.

Use the map operator to transform HTTP responses into arrays of objects, replacing response.json with direct object data, and streamline components and services with cleaner error handling.

Learn to implement optimistic updates in Angular for immediate UI feedback when creating or deleting posts, and compare with pessimistic updates that wait for server confirmation. Handle rollback on error.

Explain how observables are lazy and require subscribe, unlike eager promises; show converting with toPromise and using map, retry, and catch to illustrate reactive programming with rxjs.

Learn how routing works in Angular, configure routes for single-page applications, handle route and query parameters, and implement programmatic navigation to add seamless navigation to your apps.

Configure routes to map paths to components and enable navigation in your application. Add a router outlet to display the active component and create links to navigate between routes.

Configure angular routes for navigation between followers and posts, with a dynamic profile path using username and user id and a query string, using forRoot and router outlet.

Define routes in app module and add a router-outlet in app.html to render the component for the current route, as shown with home, followers, posts, and not found pages.

Discover how to replace href with the RouterLink directive in Angular to create fast single-page navigation, and bind dynamic route parameters with property binding and an array.

Learn how to apply dynamic active states in navigation bar with routerLinkActive directive, replacing the static bootstrap active class with active and current classes to highlight the current page.

Inject ActivatedRoute, access route parameters via paramMap, and subscribe to it to read the id parameter, convert to a number, then call a profile service to fetch the user profile.

Explore why route parameters are observables in Angular, with paramMap subscriptions tracking changing parameters while a component stays in the DOM, and learn when to use snapshot.

Configure routes with multiple parameters in angular by adding a username beside the follower id in path for search engine optimization, and update followers page to pass both parameters.

Learn how to add optional query parameters to routes, bind them with routerLink, and retrieve them with ActivatedRoute using queryParamMap, snapshot, or subscription.

Combine two observable streams, paramMap and queryParamMap, with combineLatest, subscribe to the merged stream, extract id and page, and fetch data via a service.

Replace nested subscribes with switchMap to transform a paramMap array into a followers array, using map for transformation and achieving a cleaner observable composition.

Inject the router service and navigate programmatically with router.navigate, passing the path /followers and queryParams page 1 and order newest to return to the followers list after submitting.