Learn Angular19 in 5 Days

📘 Angular 19 – Table of Contents

#	Chapter Title
1	Building First Angular App and Hosting on Netlify.com
2	Learning TypeScript for Angular
3	User Interfaces & Components
4	Pipes and Directives in Angular
5	Handling Complex Tasks with Services in Angular
6	RxJS – The Reactive Engine Angular
7	Tracking Angular Application State with Signals
8	Communicating with API / Data Services over HTTP
9	Navigating within Angular Applications with Routing
10	Validating User Data with Forms in Angular
11	Runtime Error Handling in Angular Application
12	Unit Testing Angular Applications
13	Deploying Angular Application to Production
14	Optimizing Angular Application Performance
15	Angular Material UI

Angular 19 | Chapter 15 | Angular Material UI

 

What is Angular Material in Angular ?

Angular Material is a UI component library that provides a set of pre-built, reusable components that follow Google's Material Design principles. It helps developers build beautiful, consistent, and responsive user interfaces (UIs) without having to start from scratch.

 

🎨 Key Features of Angular Material

1. Pre-built UI Components
   Angular Material provides over 30 pre-built components like:
• Buttons
• Forms
• Navigation (e.g., toolbars, sidenavs)
• Dialogs, menus, and tooltips
• Cards, tables, and lists
• Datepickers, sliders, and checkboxes
2. Material Design
   The components follow Material Design guidelines, offering a consistent visual language and ensuring a cohesive user experience across platforms.
3. Responsive
   Components are responsive by default, adapting smoothly to different screen sizes and devices.
4. Customizable
   You can customize the look and feel of Angular Material components by overriding styles or using Angular's theming system.
5. Accessibility
   Angular Material prioritizes accessibility by providing components that are keyboard-navigable and screen reader-friendly.
6. Integration with Angular
   Angular Material is designed to integrate seamlessly with Angular, leveraging Angular's features like reactive forms, animations, and change detection.

 

🔧 Setting Up Angular Material

To start using Angular Material in your project, follow these steps:

1. Install Angular Material, CDK, and Animations

ng add @angular/material

• This command installs Angular Material and automatically configures some dependencies, including Angular CDK (Component Dev Kit) and Angular Animations.

1. Choose a Theme

You’ll be prompted to choose a theme (e.g., indigo-pink, deep-purple-amber), or you can create your own custom theme.

1. Import Angular Material Modules

In app.module.ts, import the Material modules for the components you want to use. For example, if you want to use buttons and input fields:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    MatButtonModule,
    MatInputModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

📚 Example: Using Material Components

1. Material Button and Input

<mat-form-field>
  <input matInput placeholder="Enter your name" [(ngModel)]="name">
</mat-form-field>

<button mat-raised-button color="primary" (click)="submit()">Submit</button>

• mat-form-field: Wraps form inputs for consistent styling.
• matInput: Applies Material Design styles to <input> elements.
• mat-raised-button: Creates a raised button with Material Design styling.

 

2. Material Dialog (Popup)

1. Import Material Dialog Module:

import { MatDialogModule } from '@angular/material/dialog';

1. Open a Dialog:

import { MatDialog } from '@angular/material/dialog';

@Component({
  selector: 'app-my-component',
  template: '<button mat-raised-button (click)="openDialog()">Open Dialog</button>'
})
export class MyComponent {

constructor(private dialog: MatDialog) {}

openDialog() {
    this.dialog.open(MyDialogComponent);
  }
}

1. Dialog Component:

@Component({
  selector: 'app-my-dialog',
  template: `<h1>Dialog Content</h1>`
})
export class MyDialogComponent {}

 

🎨 Theming and Customization

Angular Material allows easy theming. You can customize the default colors, typography, and density.

Example: Creating a Custom Theme

1. Define a theme in styles.scss:

@import '~@angular/material/theming';

$custom-primary: mat-palette($mat-indigo);
$custom-accent: mat-palette($mat-pink, A200, A100, A400);

$custom-theme: mat-light-theme($custom-primary, $custom-accent);

@include angular-material-theme($custom-theme);

1. Add global styles (like button, input styles) by customizing Angular Material's default style.

 

🧠 Summary

Feature	Description
UI Components	Pre-built Material Design components
Theming	Built-in theming system to customize colors
Responsive	Automatically adapts to screen size
Accessibility	Focus on accessible and user-friendly components
Integration	Tight integration with Angular’s architecture

 

Angular 19 | Chapter 14 | Optimizing Angular Application Performance

 

Optimizing application performance in Angular is crucial to ensure that your app loads quickly, is responsive, and runs smoothly, especially when dealing with large-scale applications. Angular provides many built-in strategies and tools to help you improve performance. Here’s a comprehensive guide on optimizing Angular application performance:

 

🏗️ 1. Use Ahead-of-Time (AOT) Compilation

AOT Compilation compiles your Angular code during the build phase rather than at runtime. It reduces the size of the application bundle and improves the speed of the app by removing unnecessary code.

By default, the Angular CLI enables AOT compilation in production mode with the --prod flag:

ng build --prod

Benefits of AOT:

• Faster rendering: Templates are pre-compiled, which means Angular does not need to compile templates at runtime.
• Smaller bundle size: Unused code is eliminated during the AOT compilation process.

 

🛠️ 2. Tree Shaking

Tree shaking is a technique that removes unused code from the final bundle. Angular’s build system automatically removes unused services, components, and other resources during the build process if they are not referenced anywhere.

This is enabled by default in production builds when you run:

ng build --prod

How to further optimize Tree Shaking:

• Ensure that your code is modular by using ES Modules for import/export.
• Avoid using require statements and use ES6 imports.

 

🌐 3. Lazy Loading

Lazy loading is a technique where you load Angular modules only when they are required, rather than loading the entire application upfront. This significantly reduces the initial load time of your application.

You can configure lazy loading in the Angular router:

const routes: Routes = [
  {
    path: 'user',
    loadChildren: () => import('./user/user.module').then(m => m.UserModule)
  }
];

How Lazy Loading Improves Performance:

• Only loads necessary modules when the user navigates to them.
• Reduces the initial bundle size by loading only the critical parts of the application initially.

 

 

 

 

📦 4. Optimize Bundle Size

Bundle optimization involves reducing the size of the JavaScript, CSS, and other assets in the final application build.

Here are several strategies for optimizing bundle size:

• Remove unused imports: Use tree-shaking to eliminate unused code.
• Use Angular CLI's --build-optimizer: Angular's build optimizer removes unnecessary code from third-party libraries to reduce the bundle size.
  ng build --prod --build-optimizer
• Use Webpack's code-splitting feature: This allows you to split your code into smaller bundles that are loaded as needed.
• Minify CSS and JavaScript: This reduces the size of the resources and speeds up loading. Angular does this by default when using ng build --prod.
• Analyze Bundle: Use webpack-bundle-analyzer to inspect the final bundle and identify areas where you can optimize.
  npm install --save-dev webpack-bundle-analyzer

 

🔒 5. Caching & Service Workers

Caching helps your app load faster by storing assets locally in the user's browser. Using Service Workers, Angular can cache assets and enable offline support for your app.

1. Add PWA support to your Angular project:
   ng add @angular/pwa
2. Caching with Service Workers:
• Use ngsw-config.json to configure the caching strategy for different resources.
• Enable caching for assets like images, scripts, and API calls to ensure faster load times.

Benefits:

• Reduce the need for repeated requests to the server.
• Improve loading speed, even in low or intermittent network conditions.

 

⚡ 6. Change Detection Strategy

Angular uses change detection to update the view when the state of the application changes. By default, Angular uses the Default change detection strategy, which checks all components whenever any event or action triggers the change detection process.

Optimize with OnPush Change Detection:

Use OnPush change detection strategy to limit the number of checks performed on a component.

@Component({
  selector: 'app-my-component',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './my-component.component.html'
})
export class MyComponent {
  @Input() data: any;
}

How OnPush Improves Performance:

• Angular will only check the component when its input properties change or an event occurs inside the component.
• This reduces the frequency of checks, leading to improved performance.

 

 

 

🔄 7. Avoid Memory Leaks

Memory leaks can negatively impact performance over time, especially in single-page applications where components are reused without proper cleanup.

• Unsubscribe from Observables: Always unsubscribe from observables when components are destroyed.
  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
• Use takeUntil or async pipe to handle subscriptions in a more declarative way.
  ngOnInit() {
    this.dataService.getData().pipe(takeUntil(this.destroy$)).subscribe((data) => {
      this.data = data;
    });
  }
  
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
• Destroy Event Listeners: Manually remove event listeners when components are destroyed to avoid memory leaks.

 

🌟 8. Optimize Images and Assets

Large images and media files can slow down the app’s loading time. Consider the following tips:

• Image Compression: Use image compression tools (e.g., TinyPNG) to reduce image sizes.
• Lazy Load Images: Only load images when they enter the viewport (e.g., use the loading="lazy" attribute in <img> tags).
• Use WebP format: WebP images provide better compression compared to PNG and JPEG.
• Responsive Images: Use srcset to load different image sizes based on the user’s device.

 

📊 9. Track Performance with Angular’s Built-In Tools

Angular Profiler:

You can use the Angular Profiler to analyze the performance of your application. This tool helps to identify change detection cycles and potential bottlenecks.

1. Open DevTools in your browser.
2. Go to the Performance tab and record the performance.
3. Look for Angular-specific metrics like change detection cycles and component rendering times.

Lighthouse:

Google’s Lighthouse tool is a great way to analyze and improve the performance of your Angular application. It provides suggestions for optimizing performance, accessibility, and SEO.

 

📝 10. Use Web Workers for Heavy Tasks

Web Workers allow you to run heavy computations in the background without blocking the main UI thread, making your application more responsive.

You can create a web worker for tasks like data processing or large computations:

1. Generate a web worker using Angular CLI:
   ng generate web-worker app
2. Offload tasks to the web worker and handle results using the postMessage and onmessage API.

 

 

🌱 11. Use Angular Universal for Server-Side Rendering (SSR)

Angular Universal allows you to pre-render your application on the server, reducing the time it takes for the user to see content.

This improves First Contentful Paint (FCP) and is especially helpful for SEO and performance optimization in web applications.

1. Install Angular Universal:
   ng add @nguniversal/express-engine

2. Configure SSR and deploy your Angular Universal app on the server to improve performance for users with slower internet connections.

 

🧠 Summary: Angular Performance Optimization Checklist

Optimization Strategy	Description
AOT Compilation	Pre-compiles templates for faster rendering.
Tree Shaking	Removes unused code from the final bundle.
Lazy Loading	Load modules only when needed, reducing initial load time.
Optimize Bundle Size	Minify code, use --build-optimizer, and analyze bundles.
Caching & Service Workers	Use service workers to cache assets for faster loading and offline support.
OnPush Change Detection	Use OnPush strategy to reduce unnecessary change detection checks.
Memory Leaks	Ensure proper unsubscription from observables and cleanup.
Optimize Images	Compress and lazy load images, and use responsive image techniques.
Track Performance	Use Angular Profiler and Lighthouse for performance tracking.
Web Workers	Offload heavy tasks to background threads.
Angular Universal (SSR)	Pre-render the app on the server for better performance and SEO.

 

Angular 19 | Chapter 13 | Deploying an Angular Application to Production

 

Bringing an Angular application to production involves several crucial steps to ensure that the app is optimized, secure, and ready for deployment. Here’s a comprehensive guide to prepare and deploy your Angular application to production.

 

🛠️ 1. Build and Optimize the Application
 

A. Build the Application

Angular provides the ng build command to create a production-ready build.

ng build --prod

This command does several things to optimize your app:

• Ahead of Time Compilation (AOT): Compiles the templates and components during the build process, rather than at runtime. This reduces the size of the application and speeds up the initial load time.
• Minification: Reduces the size of JavaScript and CSS files by removing unnecessary white spaces, comments, and renaming variables.
• Tree Shaking: Automatically removes unused code to reduce the bundle size.
• Lazy Loading: Ensures that only the necessary code is loaded initially and additional parts of the app are loaded on demand.
• Source Map: By default, the --prod flag does not generate source maps (unless specified). This helps protect your code in production.

The build command will output the production files to the dist/ folder. You can use the following for customization:

ng build --prod --aot --build-optimizer

 

B. Configuration for Production

You can define specific environment configurations for different environments (e.g., production, development).

In src/environments/environment.prod.ts:

export const environment = {
  production: true,
  apiUrl: 'https://api.production.com'
};

You can access these values in your application:

import { environment } from '../environments/environment';

console.log(environment.apiUrl);  // Outputs the production API URL

Make sure you’re using environment-specific configurations such as API URLs, feature flags, or logging options.

 

🛠️ 2. Improve Performance
 

A. Code Splitting with Lazy Loading

Split large modules into smaller chunks and load them only when required. This significantly improves performance.

For example:

Define a lazy-loaded module:

const routes: Routes = [
  { path: 'user', loadChildren: () => import('./user/user.module').then(m => m.UserModule) }
];

The UserModule will only be loaded when the user navigates to /user, reducing the initial loading time.

B. Service Workers (Progressive Web App)

Service workers can be used to cache assets and enable offline capabilities. To enable service workers:

1. Install the required dependencies:

ng add @angular/pwa

1. Configure the service worker in ngsw-config.json to cache assets and API responses.

 

🛠️ 3. Testing in Production
 

Before deploying to production, ensure you run unit tests and end-to-end tests to verify that everything works as expected.

1. Unit Tests:

ng test --watch=false

1. End-to-End Tests:

ng e2e

If everything passes, your application is ready to be deployed.
 

 

🛠️ 4. Deploying the Application
 

There are several ways to deploy an Angular application to production. Some of the most common approaches include:

A. Deploy to a Web Server (e.g., Apache, Nginx)

After building the Angular application (ng build --prod), you can deploy the contents of the dist/ folder to a web server.

1. Apache:

• Copy the dist/ folder to the server’s root directory.
• Configure the .htaccess file for proper routing, especially for single-page apps (SPA) to handle 404s and deep links:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [L]

1. Nginx:

For Nginx, the configuration can look like this:

server {
  listen 80;
  server_name yourdomain.com;

location / {
    root /path/to/your/dist/directory;
    try_files $uri $uri/ /index.html;
  }
}

B. Deploy to Firebase Hosting

Firebase Hosting is a great option for Angular applications. To deploy your app:

1. Install Firebase CLI:

npm install -g firebase-tools

1. Login to Firebase:

firebase login

1. Initialize Firebase in your project:

firebase init

Choose Hosting, and then select your Firebase project.

1. Build the application:

ng build --prod

1. Deploy to Firebase:
   firebase deploy

C. Deploy to AWS S3 (Amazon Web Services)

1. Build the production version of your app:

ng build --prod

1. Upload the files in dist/ to an S3 bucket using the AWS CLI or S3 management console.
2. Set up CloudFront for content delivery and caching.

D. Deploy to Netlify

1. Create a Netlify account and connect it to your Git repository.
2. Add the build command:

ng build --prod

1. Configure the publish directory to dist/your-app-name.
2. Netlify will handle the deployment automatically.

 

🛠️ 5. Monitoring and Logging
 

Once your app is live, you need to monitor and log errors in production.

A. Use an Error Tracking Service (e.g., Sentry, LogRocket)

• Sentry: Capture and log errors in real-time.

npm install @sentry/angular

• LogRocket: Record user sessions to debug issues.

B. Add Logging

You can use logging services in production to track app performance, user behavior, and errors.

import { LoggerService } from './services/logger.service';

constructor(private logger: LoggerService) {}

this.logger.log('App started');

 

🛠️ 6. Secure Your Application

A. Enable HTTPS

Always serve your app over HTTPS to ensure data security.

B. CORS (Cross-Origin Resource Sharing)

Make sure your backend server is correctly configured to allow requests from the domain where your Angular app is hosted.

C. Content Security Policy (CSP)

Ensure you have a Content Security Policy in place to prevent XSS attacks.

 

🧠 Summary: Bringing Angular to Production

Step	Description
1. Build	ng build --prod to generate production-ready code.
2. Optimize	Enable tree shaking, lazy loading, and AOT.
3. Test	Run unit tests and end-to-end tests to ensure stability.
4. Deploy	Use services like Firebase, AWS, or Netlify for deployment.
5. Monitor & Log	Use services like Sentry and LogRocket for monitoring.
6. Secure	Enable HTTPS, configure CORS, and set up CSP.