Angular 8+, be professional from page one

Create a new Angular CLI workspace using Nx tools, then organize apps and libs and configure angular.json and nx.json with VS Code and Prettier.

Create your first Angular application using the Angular console, install schematics, and generate two apps, front end and front end end, then configure routing.

Explore the landing page foundation of an Angular 8+ app with a gradient background and a custom input control, and learn themes, multilingual support, and libraries with Angular Material.

Introduce library types: feature, ui, data access, and utility libraries, and explain presentational and smart components, inputs and outputs, and state management with backend systems.

Learn how to create a dedicated feature library in Angular, name it home feature library, generate with schematics, and set up lazy loading for the module.

Create your first Angular component by building a landing component inside a containers folder, and wire it into the home feature module with routing and lazy loading.

Add a landing page with a full-bleed background image and gradient overlay in angular 8+, and implement top-right theme and language controls plus an email sign-up prompt.

Learn to build flexible layouts with CSS flexbox by using display flex, flex direction, and main and cross axes, plus flex grow, flex shrink, and flex bases for alignment.

Finish the landing page by refining the email sign-up control with flexbox layout and a BEM-based component structure, showcasing blocks, elements, and modifiers in Angular with view encapsulation.

Create a shared style library with base CSS, including resets, box-sizing, and responsive font sizing using rem units, enabling theme switching across multiple Angular apps.

Install Angular Material, explore its components, and build a custom theme using palettes, SCSS mixins, and typography to style your Angular app.

Create a reusable Angular component theme using scss mixins and functions, extract primary and background palettes from a theme map, and apply theme-driven colors to a landing component.

Refine themes and typography in an Angular app by applying a dark palette, simplifying input controls, and creating a reusable foreground class with typography configuration.

Create and manage Angular Material themes by defining palettes and generating CSS files, then use a switch to toggle amber green, pink blue, and deep purple with green.

Create a reusable Angular theme picker by building a theme speaker library, a theme picker component, and exporting Angular Material modules for a menu with icons to switch themes.

Learn to implement a flexible theme picker in Angular 8+ by decoupling themes from code with a dedicated configuration module and environment service that injects themes from environment data.

Learn to build a two-column Angular theme picker using Angular Material tiles and mini fab buttons, switch themes with a style monitor service, and manage CSS themes dynamically.

Learn how to design Angular applications for multiple languages through internationalization, then tailor content via localization by translating text, formatting dates and numbers locally, and handling plurals.

Explore Angular internationalization: mark text with i18n attributes, extract translations via the Angular i18n CLI into a translation file, and build separate English and Spanish versions.

Implement a language picker in an Angular app to switch English and Spanish, wiring language data via the environment service and UI through Angular Material.

Explore angular pipes for internationalization, including date, currency, decimal, and percent formatting, and apply pluralization and alternative text with select to localize content.

Compare imperative and reactive programming using RxJS, and learn why reactive patterns simplify async work. Prepare to master operators and practice reactive concepts in future sections.

Explore core reactive programming concepts by comparing functions, promises, and generators as data producers and consumers, and by examining pull versus push models.

Explore how observables represent data streams arriving over time, illustrated by marble diagrams. Learn to create, subscribe to, and manage observables with next, error, complete, from events, and arrays.

Explore RxJS operators, including creation operators, and learn to compose them with pipe to manipulate observables and manage subscriptions.

Explore how subjects enable multicast to multiple observers, compare with observables, and learn about four types—subject, async subject, behavior subject, and replay subject—with their init values, completion, and replay buffers.

Explore reactive programming with Angular and RxJS by building a debounced, distinct until changed, switchMap based country filter, highlighting race conditions and async stream advantages.

Explore Angular forms by comparing template-driven and reactive forms, learning when to use each for setup, data model, predictability, validation, mutability, and scalability.

Learn template-driven forms in Angular using ngModel and the forms module to build a login form with required and minimum-length validation, and explore form groups and controls.

Learn how to implement reactive forms in Angular, switch from template-driven to reactive forms, build a login form with form group and controls, and apply validators.

Create a dedicated email input as its own angular library, connect it with reactive forms and validation, and emit valid emails after a 500ms debounce, enabling reuse across pages.

Implement control value accessor to let a custom email input work with Angular forms, wiring writeValue, onChange, onTouched, and disabled state, and integrate with a host component.

apply Angular Material to finish the email input control, add icon and gradient button, adjust typography and border radius, center alignment, and placeholder text for a cohesive ui.

Learn how purposeful animations enhance navigation, feedback, and user attention in Angular apps. Create basic animations from scratch and replicate them, ensuring every motion serves a UX goal.

Learn how css transitions smoothly animate property changes over time by using transition-property, transition-duration, transition-timing-function, and transition-delay, with practical examples of width, height, and position.

Explore css animations, learn how keyframes replace multiple transitions, and master animation properties: name, duration, timing function, delay, iteration count, direction, play state, and fill mode.

Learn to add custom animations to Angular components using the BrowserAnimationsModule and the Angular animations package, defining trigger, state, style, transition, and animate to create bidirectional transitions.

Master angular animations in part two by implementing in and out transitions for inserting and removing elements, using void and asterisk states, and leveraging column enter plus animation callbacks.

Use query and stagger in Angular animations to target items with the item class inside a container, define an entering trigger, and achieve a cascading reveal.

Build a reactive Angular filter and search UI with a text input and form control to drive live results and animate entry and removal with staggered transitions.

Learn to add hover and focus animations to a landing page using angular animations, creating a default and focused state with shadow and subtle scaling transitions.

Explore redux-style state management in Angular apps: a single source of truth, read-only state, and actions as objects. Use pure reducers to produce state without mutation, via angry execs.

Learn to set up a data access library and a single store for Angular applications using redux-style state management, including actions, selectors, and integrating environment services.

Learn to connect the theme picker to a store in Angular 8+, moving themes to state, using selectors and actions to reflect and update the selected theme.

The lecture explains connecting the language picker to the store using language state and selectors, dispatching a change language action via a language service.

Utilize the NGXS storage plugin to persist state in local storage, so theme and language selections survive page reloads; integrate, restore, and manage stored state effectively.

Make the shadow color dynamic by using the ngxs store's selected theme to switch between light and dark shadows. Add ngxs logger and redux devtools to observe state changes.