> Markdown version of [/playlists/angular](https://www.wearedevelopers.com/playlists/angular). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md). --- # Playlist: Angular 17 videos · 40 moments · 142.3 minutes ## SEO in Angular? No big deal with SSR and Angular Universal - **Dynamically updating metadata and titles using Angular services** (08:31, 5min) — Utilizing Angular's built-in Title and Meta services allows for dynamic header property injection upon route changes. - **Solving indexing issues with server-side rendering via Angular Universal** (15:52, 2min) — Delivering static payloads ahead of client-side hydration guarantees successful metadata interpretation for unoptimized indexing crawlers. - **Installing and configuring Angular Universal for express environments** (18:11, 4min) — Running the dedicated installation schematics automatically provisions requisite module architectures and Node engines mapping browser capabilities... - **Implementing static site generation and ahead of time pre-rendering** (30:29, 6min) — Transpiling fixed views into completely separate markup files statically caches predictable paths to optimize immediate payload retrieval without r... [Learn more](https://www.wearedevelopers.com/videos/217-seo-in-angular-no-big-deal-with-ssr-and-angular-universal) ## Angular <> Angular CDK - Awesomeness Combined - **Overview of the Angular development platform** (00:35, 4min) — The core capabilities, tools, and libraries that make up the Angular ecosystem for building scalable web applications. - **Installing and configuring Angular CDK via schematics** (13:58, 0min) — Provisioning the component dev kit and default configuration into an existing workspace utilizing the command-line interface. - **Simplifying custom component development with Angular CDK** (09:51, 4min) — How the Component Dev Kit separates behavior from presentation to solve complex UI challenges like positioning and accessibility. [Learn more](https://www.wearedevelopers.com/videos/189-angular-angular-cdk-awesomeness-combined) ## Angular Unleashed: Mastering Modern Web Development with Angular - **Fundamental architecture and modules in Angular applications** (05:53, 2min) — Modules group essential application elements while components safely isolate the user interface code and handle presentation logic. - **Overview of the Angular application framework** (04:38, 1min) — Angular acts as a component-based platform offering integrated libraries to build scalable single-page applications. - **Manipulating user interfaces with Angular directives** (12:16, 3min) — Attribute and structural directives extend HTML functionality to dynamically toggle elements and manipulate application layouts programmatically. - **Injecting external dependencies across different Angular classes** (19:49, 1min) — Leveraging default dependency injection guarantees that instantiated application features securely utilize uniform execution states. - **Output formatting using Angular pipes** (15:21, 1min) — Pipes simplify transforming raw backend strings into accessible data structures like custom dates and localized currency values. - **Injecting component and module metadata** (16:37, 1min) — Modifying runtime instructions via metadata annotations informs Angular syntax rendering engines how to resolve dependencies properly. - **Adopting Angular source code quality and version best practices** (44:51, 4min) — Preserving standards around continuous component modularity and commit formats protects project scaling and team synchronization processes. - **Automating application creation with the Angular CLI** (27:06, 1min) — Command-line functions streamline generating standardized directory boilerplate formats and orchestrate local development servers instantly. - **Compiling Angular applications dynamically and statically** (28:57, 3min) — Comparing just-in-time runtime processing to ahead-of-time deployment methods clarifies deployment configurations for varied execution environments. - **Understanding the lifecycle of Angular components** (08:48, 1min) — Managing the creation and destruction phases of an active application class prevents memory leaks and optimizes resource handling. - **Abstracting business logic into reusable Angular services** (17:45, 2min) — Custom singleton services abstract repeating API polling away from frontend components to isolate the overall domain processing logic. - **Enabling navigation without reloading using Angular routing** (23:30, 1min) — URL view coordination updates active application components to reflect user journeys without full webpage reloads. - **Testing Angular application environments for quality assurance** (52:41, 2min) — Enforcing continuous function coverage utilizing internal testing environments guarantees deployment updates lack harmful processing errors. [Learn more](https://www.wearedevelopers.com/videos/685-angular-unleashed-mastering-modern-web-development-with-angular) ## Angular Features You Should be Using - **Evolution and benefits of the Angular ecosystem** (00:00, 6min) — Leveraging Angular as a comprehensive framework streamlines the architecture and deployment of large enterprise applications. - **Simplifying application environments with Angular configuration files** (06:32, 3min) — Automating staging and production environment variables directly within build scripts reduces development friction. - **Reusing component logic through typescript class inheritance** (10:31, 2min) — Extending base typescript classes removes logic duplication while strictly preserving isolated layouts and styling. [Learn more](https://www.wearedevelopers.com/videos/197-angular-features-you-should-be-using) ## Stand alone components in Angular - **Evolution of the Angular framework from AngularJS** (00:01, 5min) — The fundamental framework transition away from initial legacy paradigms introduced concrete structural boundaries necessary for scaling complex pla... - **Implementing standalone APIs in modern Angular architectures** (11:12, 4min) — Transitioning modern components entirely outside of legacy boundaries removes complex overhead and exposes individual dependencies clearly. [Learn more](https://www.wearedevelopers.com/videos/656-stand-alone-components-in-angular) ## Angular Signals: what's all the fuss about? - **Framework landscape and early community reception** (33:54, 4min) — Angular's reactive approach compares favorably to alternate libraries like SolidJS. - **Origins and goals of Angular signals** (00:00, 5min) — How community feedback and performance demands led to a built-in reactivity model. [Learn more](https://www.wearedevelopers.com/videos/684-angular-signals-what-s-all-the-fuss-about) ## State of Angular - **Core principles of the Angular framework** (00:02, 1min) — Why Angular remains a stable, scalable, and opinionated platform built specifically for web development. - **Debugging with the Angular DevTools extension** (08:51, 1min) — A highly requested Chrome extension provides deeper application profiling and clarifies complex framework errors. [Learn more](https://www.wearedevelopers.com/videos/287-state-of-angular) ## NgRx Tips for Future-Proof Angular Apps - **Angular framework benefits and technical career backgrounds** (24:18, 2min) — Insights into preferring Angular for its native reactive programming model alongside reflections on early engineering careers. [Learn more](https://www.wearedevelopers.com/videos/365-ngrx-tips-for-future-proof-angular-apps) ## On tour with heroes == Moving from Angular to WebComponents - **Evaluating Angular trade-offs and the web components alternative** (03:09, 3min) — Angular's size and complexity create vendor lock-in, making simpler, framework-agnostic web components an appealing alternative. [Learn more](https://www.wearedevelopers.com/videos/63-on-tour-with-heroes-moving-from-angular-to-webcomponents) ## Differential Loading - **Why developers choose to adopt the Angular framework** (01:57, 3min) — Adopting a mature and typed JavaScript architecture standardizes logic for scaling enterprise teams. [Learn more](https://www.wearedevelopers.com/videos/317-differential-loading) ## Angular Magical directives - **Introduction to building reusable Angular components** (00:05, 3min) — An introduction to solving UI duplication by building reusable component libraries in Angular without relying on external dependencies. [Learn more](https://www.wearedevelopers.com/videos/497-angular-magical-directives) ## Sustainable Angular Architectures with Nx and Strategic Design - **Replacing Angular modules with lightweight fine-grained libraries** (45:32, 5min) — Decomposing heavy logic into granular libraries yields superior caching boundaries while moving away from traditional Angular module patterns. - **Building long-term Angular architectures with domain-driven design** (00:16, 4min) — Creating sustainable enterprise applications requires balancing design methodologies like domain-driven design with an experienced team logic. [Learn more](https://www.wearedevelopers.com/videos/5-sustainable-angular-architectures-with-nx-and-strategic-design) ## Angular tips/tricks you can use from tomorrow on - **Exploring Angular component patterns and upcoming framework updates** (41:53, 8min) — Optimal component modularity, upcoming standalone capabilities, and framework ecosystem advantages are evaluated alongside community questions. [Learn more](https://www.wearedevelopers.com/videos/364-angular-tips-tricks-you-can-use-from-tomorrow-on) ## Generating code with Angular schematics - **Understanding the basics of Angular schematics** (00:16, 1min) — An overview of schematics as a template-based code generator for project transformation. [Learn more](https://www.wearedevelopers.com/videos/129-generating-code-with-angular-schematics) ## Level up your Angular CSS with Tailwind CSS - **Installing and configuring Tailwind in an Angular application** (09:07, 5min) — How generating an environment configuration file and importing base variables enables immediate Angular component styling. [Learn more](https://www.wearedevelopers.com/videos/366-level-up-your-angular-css-with-tailwind-css) ## Native Federation: The Future of Micro Frontends and Plugin-Systems in Angular - **Configuring Native Federation in Angular projects** (11:03, 7min) — Modifying auto-generated federation configurations allows developers to expose application modules and share dependencies securely. [Learn more](https://www.wearedevelopers.com/videos/1018-native-federation-the-future-of-micro-frontends-and-plugin-systems-in-angular) ## Generate Customer Journeys from reusable Building Blocks - **Generating angular applications from basic flow configurations** (07:53, 4min) — Using custom angular schematics and a routing engine to scaffold a standalone application automatically. [Learn more](https://www.wearedevelopers.com/videos/400-generate-customer-journeys-from-reusable-building-blocks)