> Markdown version of [/videos/197-angular-features-you-should-be-using](https://www.wearedevelopers.com/videos/197-angular-features-you-should-be-using). 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).

---

# Angular Features You Should be Using

Sani Yusuf reveals the underutilized Angular features you need to scale enterprise apps. Master component inheritance, differential loading, and HTTP interceptors to ship faster, cleaner code.

- **Speakers:** Sani Yusuf
- **Event:** World Congress 2021
- **Published:** July 1, 2021
- **Duration:** 36:22
- **URL:** https://www.wearedevelopers.com/videos/197-angular-features-you-should-be-using

## Summary

Sani Yusuf breaks down some of the most powerful, yet often underutilized, tools inside the Angular framework that streamline enterprise application development. By providing a comprehensive, batteries-included toolset, Angular helps engineering teams maintain consistency and catch errors early at development time using TypeScript. The framework's robust CLI and modular architecture allow developers to tackle complex staging setups, large codebases, and varying browser requirements without abandoning clean design patterns.

A crucial part of scaling an Angular application is mastering advanced configuration and component design. Developers can leverage easy environment configurations to dynamically swap variables across staging, QA, and production builds entirely within the CLI. For code reuse—especially in multi-tenant or white-labeled applications—component inheritance enables teams to share business logic across components while maintaining distinct templates and styles, effectively avoiding the software anti-pattern of "inappropriate intimacy." Additionally, HTTP interceptors provide a seamless mechanism for cloning requests to securely attach Bearer tokens or log analytics uniformly across an application's data layer.

To optimize user experience and download speeds, Angular automates differential loading, serving lightweight ES6 modules to modern browsers while reserving heavy ES5 polyfills purely for legacy environments. Furthermore, developers can implement component-level lazy loading to fetch targeted UI fragments dynamically at runtime, shrinking the initial application payload far beyond traditional module routing. Finally, managing user input is fortified through reactive forms, giving teams granular control over validation constraints and programmatic states—such as tracking if a field is pristine or dirty—to ensure resilient data handling.

**Keywords:** angular cli configuration, enterprise frontend architecture, dynamic environment variables, component class inheritance, multi-tenant application design, http interceptor implementation, bearer token attachment, differential loading strategy, legacy browser polyfills, es6 javascript modules, component lazy loading, asynchronous ui rendering, angular reactive forms, pristine validation state, inappropriate intimacy code smell, typescript static typing

## Chapters

1. **Evolution and benefits of the Angular ecosystem** (00:00) — Leveraging Angular as a comprehensive framework streamlines the architecture and deployment of large enterprise applications.
1. **Simplifying application environments with Angular configuration files** (06:32) — Automating staging and production environment variables directly within build scripts reduces development friction.
1. **Reusing component logic through typescript class inheritance** (10:31) — Extending base typescript classes removes logic duplication while strictly preserving isolated layouts and styling.
1. **Managing network requests using HTTP interceptors** (13:07) — Intercepting outbound network traffic directly simplifies dynamically appending authorization headers across global server interactions.
1. **Optimizing bundle sizes with differential loading strategies** (15:59) — Serving modern modules to newer browsers natively isolates massive rendering polyfills entirely to legacy fallbacks.
1. **Decreasing initial load times with component selective fetching** (21:26) — Selectively querying elements dynamically upon interaction sharply accelerates the initial framework rendering lifecycle.
1. **Managing complex user inputs with reactive forms** (24:40) — Tracking complex validity and pristine states strictly within typescript prevents chaotic HTML validation architectures.
1. **Audience questions on bundle sizes and multi-tenant architecture** (29:14) — Leveraging isolated component inheritance resolves complex architectural bottlenecks when scaling white-labeled enterprise software platforms.

## Related Moments

- [Utilizing advanced configuration and component inheritance in Angular](https://www.wearedevelopers.com/videos/317-differential-loading) (from "Differential Loading")
- [Core principles of the Angular framework](https://www.wearedevelopers.com/videos/287-state-of-angular) (from "State of Angular")
- [Exploring Angular component patterns and upcoming framework updates](https://www.wearedevelopers.com/videos/364-angular-tips-tricks-you-can-use-from-tomorrow-on) (from "Angular tips/tricks you can use from tomorrow on")
- [Angular framework benefits and technical career backgrounds](https://www.wearedevelopers.com/videos/365-ngrx-tips-for-future-proof-angular-apps) (from "NgRx Tips for Future-Proof Angular Apps")
- [Overview of the Angular development platform](https://www.wearedevelopers.com/videos/189-angular-angular-cdk-awesomeness-combined) (from "Angular <> Angular CDK - Awesomeness Combined")
- [Building long-term Angular architectures with domain-driven design](https://www.wearedevelopers.com/videos/5-sustainable-angular-architectures-with-nx-and-strategic-design) (from "Sustainable Angular Architectures with Nx and Strategic Design")

## Related Articles

- [Exploring TypeScript: Benefits for Large-Scale JavaScript Projects](https://www.wearedevelopers.com/magazine/554-exploring-typescript-benefits-for-large-scale-javascript-projects)
- [How to Avoid Over-Engineering](https://www.wearedevelopers.com/magazine/546-how-to-avoid-over-engineering)
- [Dev Digest 139 - Soft and hard queries](https://www.wearedevelopers.com/magazine/487-dev-digest-139-soft-and-hard-queries)
- [Web Development Best Practices: What The Data Tells us](https://www.wearedevelopers.com/magazine/84-web-development-best-practices-what-the-data-tells-us)

## Related Jobs

- [Senior Software Engineer, Angular (B2C Web Platform)](https://www.wearedevelopers.com/jobs/ext/1927757-senior-software-engineer-angular-b2c-web-platform) at **Bitpanda**
- [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda**
- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**
- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1304673-software-engineer) at **Bitpanda**