Angular Crash Course for Busy Developers

Install TypeScript globally, write your first TypeScript program in main.ts, and transpile it with the TypeScript compiler. Learn that JavaScript code is valid TypeScript and how ng serve automates transpilation.

Learn TypeScript variable declarations, compare var and let, and see how let provides block scope while var behaves differently. TypeScript compiler catches errors at compile time and outputs ES5 JavaScript.

Learn how to use type assertions in TypeScript to tell the compiler a variable is a string, using angle-bracket and as syntax, without changing runtime behavior.

Explore how arrow functions in TypeScript simplify function definitions for Angular apps, using console.log, single-line bodies, optional parentheses for one parameter, and C# lambda expressions.

Learn to manage TypeScript parameters by passing a point object or a Point interface with x and y, and compare in-line annotations with interfaces.

Learn the cohesion principle by turning a point’s interface into a single class that bundles x, y and the draw and getDistance methods, keeping related behavior together.

Declare a point class in TypeScript, initialize with new, access fields via this, call draw and getDistance, and distinguish class versus object while compiling and running with tsc and node.

Explore how TypeScript access modifiers—public, private, and protected—control outside access to class members, preventing coordinate changes by making fields private and reducing bugs by creating more predictable code.

TypeScript lets you prefix constructor parameters with an access modifier to auto-generate and initialize private or public fields, reducing repetitive assignments like this.x = x and this.y = y.

Learn how to expose private fields with properties in TypeScript by implementing getters and setters, validating input, and using camel casing with an underline prefix for clean access.

Move the point class to a separate file, export it, and import it in main.ts to demonstrate TypeScript modules in action. Compare TypeScript modules with Angular modules to organize applications.

Export a like component with private fields for likes and selection, and implement onClick to toggle state and update the count.

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

Learn how to create an Angular component, register it in a module, and render it in HTML with a custom selector, using the Component decorator and module declarations.

Generate a component with the Angular command line interface using ng g c; it creates a folder with ts, html, css, and spec files and updates app module declarations automatically.

Learn how to extract HTTP logic into a reusable Angular service to fetch course lists, decouple components from endpoints, enable unit testing with mock services, and reuse across pages.

Dependency injection decouples a component from the courses service by injecting it via the constructor. Register the service as a provider in the app module to enable testable singleton.

Learn to display data on views, apply classes and styles to DOM elements, format data with pipes, and handle events from the DOM in Angular.

See how interpolation translates to property binding, bind DOM element properties with square brackets, and note one-way binding from component to the DOM in Angular.

Discover style binding in Angular, a variation of property binding that applies inline styles using [style.property], setting the button background color to blue when is active is true, otherwise white.

Bind and handle DOM events in Angular using event binding with parentheses, call on save, access the dollar event object to inspect properties, and control event bubbling with stopPropagation.

Explore Angular event filtering by applying the .enter filter to a keyup event, so onKeyUp runs only when the user presses enter. Compare with the traditional keyCode 13 approach.

Explore how to retrieve input values in angular by using the event object or a template variable, and log the input, such as an email, to the console.

Learn how to implement two-way binding in Angular using the banana in a box syntax with ngModel, replacing repetitive code, and understand the need to import the forms module.

Explore how to format data with angular pipes, using built-in pipes for uppercase, lowercase, decimal, currency, and date, and chain pipes to control digits and display formats; preview custom pipes.

Build reusable Angular components by passing data, raising custom events, and applying styles, while mastering Shadow DOM and view encapsulation.

learn how to add property and event binding to a favorite component by defining input and output properties, enabling a reusable public API for host components.

Alias input properties in Angular to support dash-case markup and keep a stable API. Use the input decorator to alias is-favorite, preventing breaking changes during refactoring.

Learn to implement output properties in an Angular component by creating a change event with EventEmitter, binding it to a host method, and testing with console feedback.

Pass data with Angular events by emitting a boolean or object from a child component and handling it in the parent via the $event object, enabling compile-time checking.

Use alias on output properties to keep a component’s application interface stable when renaming events; rename change to click, ensuring the consumer still handles the event and logs remain intact.

Use inline templates for small components and external templates when the template grows beyond five lines. Angular CLI stores templates in files but bundles them with the main bundle.

See how shadow dom provides style encapsulation and how Angular view encapsulation emulates it for browsers that lack native support. Understand the default emulated mode and its CSS post-processing.

Learn to build a reusable Angular panel component using ng-content with select for heading and body. Inject custom markup into two slots.

Explore ng4 in detail, review built-in directives for rendering lists, and cover other directives such as switch, class, and style, then build custom directives in Angular.

Show or hide content with the ngIf directive in Angular, using an asterisk, templates, and else blocks to display a course list or a no courses message.

Learn to implement tabbed views with the ngSwitchCase directive to render map and list content, using ngSwitch, ngSwitchCase, and dynamic content rendering.

Render a list of course objects by defining a courses array with id and name, and use ngFor to display each course while exposing index and even and odd values.

Learn how Angular's change detection responds to state changes by adding, removing, and updating courses in a list using ngFor, with real-time DOM updates.

Explore how the leading asterisk rewrites ngIf with an ng template to conditionally render a course list, using courses.length checks and else blocks.

Learn to use the class directive (ngClass) with an object to bind multiple CSS classes in Angular, replacing repeated class bindings, and control icons with boolean expressions.

Explore using ngStyle to bind multiple CSS properties in Angular, toggling background, color, and font weight with canSave, and learn when to prefer CSS classes over inline styles.

Learn how to prevent null or undefined errors when accessing nested object properties in Angular by using the safe traversal operator, instead of only relying on ngIf.

Create and apply custom directives in Angular to format input values on focus and blur, using host listener, input properties, and a directive selector as an alias.

Discover how to build and validate forms in Angular using form control and form group, compare template driven and reactive forms, and understand validation states, errors, and unit testing.

Learn how ngModel powers template-driven forms in Angular by turning input fields into form controls with a name, then inspect states like dirty, pristine, valid, touched, and log changes.

Explore how to implement specific HTML5-based validators in Angular, including minlength, maxlength, and pattern, and render separate dynamic error messages from the errors object for each input.

Learn how to format Angular templates for forms by breaking attributes onto separate lines, listing validation attributes first, using ngModel with name, and clearly separating validation errors for readability.

Explore how ngForm automatically applies to form elements, creates a form group from form controls, and exposes the ngSubmit event along with valid, invalid, and value for json submission.

Master form control and form group in Angular, where ngmodel creates a form control, ngform auto-creates a form group and exposes submit, while ngmodel group handles subgroup forms.

Disable the submit button until the form is valid by binding the disabled property to f.valid, using NgForm directive and template variable F to check first-name validity against a regex.

Learn to add a dynamic dropdown in an Angular form using ngModel, populate options from API, and use ngValue or value to send id or the object, including multiple selection.

Build a bootstrap radio button group with div class radio, label, and input type radio; bind with ngModel and render dynamically with ngFor for contact methods like email and phone.

Learn reactive forms in Angular by explicitly creating form controls in code for dynamic, server-driven forms, with validation, custom and asynchronous validation, and arrays of addable or removable objects.

Learn to build reactive forms in Angular by creating form group and form control objects, wiring them to username and password fields, and importing the ReactiveFormsModule.

Learn to attach an array of validators to an Angular form control, including required and min length, and display specific error messages in the template.

Discover how to implement a custom validator in Angular forms with a static method cannot contain space, returning a validation error or null, and applying it in a signup form.

Learn how to implement an asynchronous username validator in Angular by simulating a server call, exploring non-blocking behavior with setTimeout, and understanding why async validators require a different signature.

Learn to implement asynchronous validation in Angular by building a promise-based async validator, wiring it into a form control, and displaying real-time username availability with a simulated server delay.

Display a loader image during async validators by using the form control's pending property to show a loader while the server checks username uniqueness, then observe it appear and disappear.

Learn to validate a login form on submit by sending credentials to server, using ng form with form group and form control, and set errors to show invalid login.

Master Angular reactive forms with FormBuilder to create form groups, form arrays, and a nested contact group with email and phone, plus the required validator.

Recap building reactive forms with a form group, name control, contact subgroup, and topics array, then bind them in the template using form group name, form control name, and ng4.

Create a new post by sending an http post request with a json body from the title input. Subscribe to the response to extract the id and update posts array.

Extract a service in Angular, register it in app.module, and move it to a services folder to support get, create, update, and delete posts via observables.

Master the handling of unexpected and expected errors in Angular apps by simulating server offline and network down scenarios, plus 404 not found and 400 bad request, with user messages.

Handle expected errors in an Angular post component by annotating the error as a response, using a subscribe error handler, and mapping 404 and 400 to user-friendly messages.

Catch and throw application specific errors for bad requests in the post service, introducing a bad input class to distinguish 400 errors and surface server validation errors in the form.

Learn to implement a global error handler in Angular by creating an app error handler, replacing the default handler with a provider, and rethrowing errors to trigger it.

Refactor the post service by extracting a private handleError method to centralize error handling for create, update, delete, and get posts, mapping 400 and 404 statuses.

Extract a reusable data service for http endpoints by creating a generic, inherited class that handles get all, create, update, and delete with a shared url.

Learn how to use the map operator in an Angular data service to transform http responses into arrays of objects, replacing response handling with direct json objects for cleaner components.

Master routing and navigation in Angular by configuring routes, building single page applications, using route and query parameters, and performing programmatic navigation to add seamless app navigation.

Configure routes to map urls to components, insert a router outlet to display the active component, and add navigation links to enable in-app routing with Angular.

Configure angular routes with path and component to navigate between home, followers, and posts. Use username parameters, query strings, and a wildcard not-found route for dynamic profiles.

Replace href with router link to enable single-page navigation, reloading only content, and use property binding with an array for dynamic route parameters.

Use the router link active directive to dynamically apply css classes when a navigation link becomes active, ensuring the current page (posts or followers) is highlighted in the navbar.

Inject the activated route to access route parameters via the param map observable, subscribe to it, and fetch the user profile with a service.

Discover why route parameters are defined as observables and how subscribing to the route parameters observable updates the component during navigation.

Modify angular routes to support multiple parameters by adding a username to the path, and update followers page to render links that include follower id and username in the URL.

Subscribe to multiple observables by combining them with rxjs combineLatest, then subscribe to the resulting observable to access route parameters and optional query parameters for data retrieval.

Navigate programmatically in Angular by injecting the router service and calling navigate with a path and optional query parameters page and order, returning from profile to the followers list.