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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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 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.

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.

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 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.

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.

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.

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 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.