Advanced Angular Topics

Advanced Angular topics help developers build high-performance, scalable, and modern applications. These concepts are ideal for enterprise apps or projects requiring complex functionality.

1. Custom Decorators

Decorators add metadata or modify behavior of classes, methods, or properties.

Example: Logging decorator


function Log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
const original = descriptor.value;
descriptor.value = function (...args: any[]) {
console.log(`Calling ${propertyKey} with`, args);
return original.apply(this, args);
};
}

class Calculator {
@Log
add(a: number, b: number) {
return a + b;
}
}

const calc = new Calculator();
calc.add(2, 3); // Logs method call

2. Dynamic Components

Load components at runtime dynamically using ComponentFactoryResolver or ViewContainerRef.


@ViewChild('container', { read: ViewContainerRef }) container!: ViewContainerRef;

loadComponent() {
const factory = this.resolver.resolveComponentFactory(DynamicComponent);
this.container.clear();
this.container.createComponent(factory);
}
  1. Useful for modals, dashboards, and plugins

3. Angular Universal (SSR)

Server-Side Rendering (SSR) improves SEO and initial load time.


ng add @nguniversal/express-engine
  1. Generates server-side rendering project
  2. Builds HTML on the server before sending to client
  3. Ideal for SEO-heavy applications

4. Micro-Frontends using Module Federation

  1. Split large apps into independent modules
  2. Use Webpack Module Federation to load modules dynamically

Example:


// webpack.config.js
new ModuleFederationPlugin({
name: 'shell',
remotes: {
mfe1: 'mfe1@http://localhost:4201/remoteEntry.js'
}
});
  1. Enables team-level parallel development
  2. Supports lazy loading of remote modules

5. PWA (Progressive Web App)

Angular supports PWA for offline and mobile-first apps.


ng add @angular/pwa
  1. Adds service workers, manifest.json, and icons
  2. Supports offline caching and push notifications
  3. Enhances mobile UX

6. Multi-language (i18n Localization)

Angular provides built-in i18n support for multi-language apps.

  1. Mark texts for translation:

<h1 i18n="@@welcome">Welcome</h1>
  1. Extract translation file:

ng extract-i18n
  1. Provide translations for each language (messages.fr.xlf, messages.es.xlf)
  2. Build for a specific locale:

ng build --localize

7. Custom Webpack Configuration

Override default Angular build with custom webpack:


ng add @angular-builders/custom-webpack

custom-webpack.config.js:


module.exports = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};
  1. Useful for custom loaders, plugins, and optimizations

Summary

  1. Custom Decorators: Extend or modify class/method behavior.
  2. Dynamic Components: Load components at runtime for flexible UI.
  3. Angular Universal (SSR): Improve SEO and initial load.
  4. Micro-frontends: Break large apps into independent modules using Module Federation.
  5. PWA: Offline support, push notifications, mobile-first experience.
  6. i18n Localization: Multi-language support for global users.
  7. Custom Webpack: Extend Angular CLI build for advanced optimizations.