Learn and Master Angular

# Learn Angular

This repository contains a list of resources to learn Angular. It includes tutorials, articles, videos, books, and other resources to help you learn Angular from scratch.

Table of Contents

• Introduction
  • Features of Angular
  • Difference between AngularJS vs Angular
  • Angular vs React
• Roadmap
• Configuration
  • Prerequisites
  • Installation
• Components
  • Three main building blocks
  • Component Creation
    • Using Angular CLI
    • Manual Creation
    • Example
  • Scope
  • View Encapsulation
    • Emulated View Encapsulation
    • Shadow DOM View Encapsulation
    • None View Encapsulation
  • Component Communication
    • Parent to Child
    • Child to Parent
• Standalone Components
• Data Binding
  • One Way Binding
  • Two Way Binding
• Directives
  • Structural Directives
  • Attribute Directives
  • Custom Directives
  • Other Directives
• New Control Flow
• Pipes
  • Date Pipe
  • Uppercase Pipe
  • Lowercase Pipe
  • Currency Pipe
  • Percent Pipe
  • Slice Pipe
  • Decimal/number Pipe
  • JSON Pipe
  • Async Pipe
• Decorators
  • Input
  • Output
  • HostListener
  • ContentChild & ContentChildren
  • ViewChild & ViewChildren
  • HostListener
  • ContentChild & ContentChildren
  • ViewChild & ViewChildren
• Life Cycle Hooks
  • OnChanges
  • OnInit
  • DoCheck
  • AfterViewInit
  • AfterViewChecked
  • AfterContentInit
  • AfterContentChecked
  • OnDestroy
• Forms
  • Template Driven Forms
  • Reactive Forms
• Services
  • Injectable Decorator
  • Dependency Injection
  • Providers
• Routing
  • Router Outlet
  • Router Link
  • Router Link Active
  • Router State
  • Router Events
  • Router Guards
• Lazy Loading
• HTTP Client
• Destroy Ref
• Http
• Module
• Router
• Route Parameter
• Route Guards
• Observables
  • Creating Observables
  • Subscribing to Observables
  • Difference between Observables and Promises in Angular
• Unsubscribe
• Renderer2
• JIT
• AOT
• Deferrable Views
• Meta Tags
  • Title Service
    • Dynamic Title
  • Meta Service
• Angular Signals
• Security
  • Preventing cross-site scripting (XSS)
  • Angular's cross-site scripting security model
  • Preventing cross-site scripting (XSS)
  • Angular's cross-site scripting security model
  • Sanitization and security contexts
  • Sanitization example
  • Direct use of the DOM APIs and explicit sanitization calls
  • Trusting safe values
  • Content security policy
  • Enforcing Trusted Types
  • Use the AOT template compiler
  • Server-side XSS protection
  • HTTP-level vulnerabilities
  • Cross-site request forgery
  • HttpClient XSRF/CSRF security
  • Configure custom cookie/header names
  • Disabling XSRF protection
  • Cross-site script inclusion (XSSI)
  • Auditing Angular applications
• Angular Animations
  • Installing Angular Animations
• Angular Universal
  • Creating an Angular Universal application
• Bootstrap
  • Installing Bootstrap
  • Importing Bootstrap
• Angular Material
  • Installing Angular Material
  • Importing Angular Material
• Tailwind CSS
  • Installing Tailwind CSS
  • Importing Tailwind CSS
• PrimeNG
  • Installing PrimeNG
  • Importing PrimeNG
• SPA
  • Advantages of SPA
• PWA
  • Installing PWA
  • Configuring PWA
  • Building PWA
  • Service Worker
  • Features of PWA
• CLI Commands
• Version compatibility
• Deploying an Angular Application
• Imports
• TypeScript
• RxJS
• Learn From GitHub Repositories
• Learn From Websites
• Learn From Books
• Learn From YouTube Channels
• Learn More From Blogs Sites
• List of Online Editors/Compiler for Angular
• List of Twitter Users to Follow
• List of LinkedIn Users to Follow
• List of Discord Servers to Join

Introduction

Angular is a popular open-source framework by Google for building single-page and dynamic web applications. It offers tools and libraries for components, services, forms, routing, and HTTP client, all built with TypeScript. Angular is known for its performance, scalability, and developer productivity.

Features of Angular

• Component-Based Architecture: Reusable, self-contained units of code that define the UI and behavior of a part of the application.
• Two-Way Data Binding: Automatic synchronization of data between the model and the view.
• Dependency Injection: Provides components with the services they need for better modularity and testability.
• Routing: Powerful system for navigation between different views, supporting deep linking, lazy loading, and route guards.
• Forms: Tools for template-driven and reactive forms, based on a model-driven approach.
• HTTP Client: Simple API for making HTTP requests and handling responses.
• Observables: Handles asynchronous operations and event handling.
• TypeScript: Superset of JavaScript with static typing, better tooling, error checking, and code completion.
• Performance: Optimized for performance with virtual DOM, lazy loading, tree shaking, and ahead-of-time compilation.
• Mobile Support: Tools for building responsive, touch-friendly mobile applications, including PWAs.
• SEO Friendly: Tools for server-side rendering, pre-rendering, and meta tags to improve search engine visibility.
• Community Support: Large, active community providing support and sharing knowledge.

Difference between AngularJS vs Angular

AngularJS	Angular
Based on MVC Architecture	Based on Components
Uses JavaScript to build the application	Uses TypeScript to build the application
No Mobile Support	Mobile supports
Run on only client-side	Runs on both client-side as well as server-side
CLI not present	CLI present
No SEO Friendly	Seo Friendly
Performance is slow	Performance is fast

Back to top⤴️

Angular vs React

• Angular: A full-fledged framework by Google for building web applications. It includes features like two-way data binding, routing, forms, and HTTP client. Ideal for large, complex applications needing a complete solution.

• React: A JavaScript library by Facebook focused on building user interfaces. It provides a simple, declarative way to build UI components. Suitable for small to medium-sized applications requiring flexibility and customization.

Comparison: Angular offers a complete solution with built-in features, while React focuses on the view layer, allowing developers to choose additional tools and libraries.

When to use Angular: Best for large, complex applications needing integrated tools and scalability.

When to use React: Best for small to medium-sized applications needing flexibility and a focus on the UI.

Back to top⤴️

Roadmap

Angular Roadmap

Configuration

Prerequisites

• Node.js
• NPM
• Angular CLI

Installation

Install the Angular CLI globally:

npm install -g @angular/cli

If you want to install a specific version of the Angular CLI, you can use the following command:

npm install -g @angular/cli@version-number

If you have already installed the Angular CLI, you can update it to the latest version using the following command:

npm install -g @angular/cli@latest

Check version

ng version

Create a new Angular project: (Replace [PROJECT NAME] with your project name)

# with standalone component
ng new [PROJECT NAME]

# without standalone component
ng new [PROJECT NAME] --standalone=false

##