Angular - Mastering the Basics

Set up your angular dev environment by installing node, npm, and angular cli; learn basics of typescript and javascript and prepare your editor for a hello world app.

Create and run your first angular application with ng new and ng serve, then view it at localhost:4200 while learning modules, components, and services.

Explore the anatomy of an Angular component, including template, class, and metadata, and learn how to create, declare, and reuse components with selectors, inline templates, and styles.

Master interpolation by binding class data to the template with double curly braces, enabling dynamic values, string concatenation, and method calls.

See how property binding in Angular targets the DOM property, not an attribute, with examples using value and id; understand interpolation and the bind- syntax for booleans.

Explore how to bind classes to angular elements using class attributes, property binding, and the ngClass directive, with real examples for conditional and multiple class applications.

Bind inline styles with [style.color], use conditional expressions like hasError ? 'red' : 'green', bind highlightColor to color, and apply multiple styles via ngStyle with a style object.

Explore Angular event binding to capture user actions from the template, wiring click events to component class methods, using the $event object for details, and optional inline template statements.

Use template reference variables in Angular to access an input and its properties, pass its value to a click handler, and log the result to the console for simple validations.

Demonstrate two-way binding by linking an input to a class property so the view and the model stay in sync, using the ngModel directive.

Learn how the ngIf directive conditionally renders elements by toggling true or false, using then and else blocks, and template references to control dom removal versus display.

Learn how ngSwitch mirrors a switch statement to render content based on a color property, displaying red, blue, or green messages, with a default case for unmatched values.

Use the ngFor directive to render a list from a colors array, displaying an h2 for each color (red, blue, green, yellow) with index, first, last, odd, and even.

Learn how Angular components communicate: bind data from the parent to the child with input decorators and property binding, and emit events from child to the parent using output decorators.

Explore angular pipes and learn how built-in pipes transform strings, numbers, currency, and dates for the view, including lower, upper, title case, slice, and date formats.

Explore why and how to use services in Angular to share data across components, implement reusable logic, and apply dependency injection for a scalable employee data example.

Discover how dependency injection in Angular decouples classes, uses an injector to manage and provide services to components, and improves flexibility and testability.

Generate the employee service, add a get employees method, register the service with Angular's injector at the module level, and inject it into components to fetch employees.

Learn how to replace hardcoded data with an HTTP get request in Angular, fetch data from a server via observables, and subscribe in the employee list and employee detail components.

Learn to fetch data using http in angular by making a get request with the http client, casting to an employee interface, and subscribing to the observable in components.

Master http error handling in Angular by using the catch operator on observables, creating a reusable error handler that throws descriptive messages, and displaying errors in the component view.

Master routing and navigation in Angular by creating department and employee list components, configuring routes, and using router link and router outlet to switch views via buttons.

Learn to implement wildcard routes and redirects in Angular to handle unknown URLs, ensure specific routes load first, set a default department list, and use the pathMatch property.

Navigate to department detail using router with a route parameter id, then read it via activated route to display the selected department id in the view.

Replace the snapshot approach with the paramMap observable in the department detail component to dynamically read the current id from the route and support previous and next navigation via router.navigate.

Learn how to use optional route parameters in Angular to implement a back button from department detail to the list, and highlight the selected department.

Explore relative navigation in Angular, replacing hard-coded absolute routes with router.navigate using relativeTo to keep department list and detail routes flexible and maintainable.

Learn to implement child routes in Angular by defining a children array with overview and contact paths inside the department detail component, using the router outlet directive and relative navigation.

Discover angular version 6, focusing on toolchain improvements, synchronized major versions, and easier updates with ng update and schematics, plus new template tag usage, providedIn root services, and angular elements.

upgrade your angular app from version 5 to 6 using the update tool, refresh global and local packages, and migrate rxjs 5 to 6 with pipe syntax.