• Angular is a popular open-source JavaScriptframework developed by Google for building dynamic web applications. It uses declarative templates, dependency injection, and two-way data binding to create complex user interfaces with less code.

1. Two-way data binding :

• Allows for automatic synchronization of data between the model and view.

2. Dependency injection :

• Provides a way to manage dependencies and create loosely coupled components.

3. Directives :

• Allow for extending HTML with custom behavior.

4. Modular architecture :

• Helps in organizing the application into smaller, manageable modules.

5. Testing :

• Provides built-in support for unit testing using tools like Jasmine and Karma.

6. Routing :

• Offers client-side routing for building single-page applications (SPAs).

AngularJS is the first version of Angular, also known as Angular 1.x, while Angular is the latest version, also known as Angular 2+ or just Angular. Some key differences are.

• Angular is written in TypeScript,while AngularJS is written in 
• Angular uses a component-basedarchitecture, while AngularJS uses a directive-based
• Angular has better performanceand improved loading times compared to AngularJS.
• Angular uses a hierarchical dependencyinjection system, while AngularJS uses a global dependency injection system.
• Angular has a more modular structurewith improved tooling, making it easier to maintain and scale compared to AngularJS.

Angular directives are a powerful feature of the Angular framework, which is a popular open-source JavaScript framework for building web applications. Directives are used to extend the functionality of HTML by allowing developers to create custom HTML elements, attributes, or CSS classes that can be used in Angular templates to provide additional behavior or functionality.

There are three types of Angular directives:

1. Component Directives :

• These are the most common type of directives in Angular and are used to create reusable components with their own view, data, and behavior.Components are typically used to create UI elements, such as buttons, forms, and cards, and can be composed to create complex user interfaces.

2. Attribute Directives :

• These are used to modify the behavior or appearance of existing HTML elementsby applying custom behavior to them. Attribute directives are typically used to add or modify behavior on elements like input fields, buttons, or images.

3. Structural Directives :

• These are used to manipulate the structureof the DOM (Document Object Model) by adding, removing, or manipulating elements based on certain conditions. Structural directives are typically used for tasks such as conditionally rendering content, looping through lists, or dynamically creating components.

Directives are a key part of Angular’s declarative approach to building web applications, where the behavior and appearance of components are defined in the template, making it easier to understand and maintain the code. Directives provide a way to extend HTML with custom functionality and behavior, making Angular applications more modular, maintainable, and scalable.

Data binding in Angular is a mechanism that synchronizes data between the model and the view. There are four types of data binding in Angular.

1. Interpolation :

• Binds data from the component to the view using curly braces {{ }}.

2. Property binding :

• Binds data from the component to the view using square brackets [].

3. Event binding :

• Binds events from the view to the component using parentheses ().

4. Two-way binding :

• Binds data in both directions between the component and the view using [(ngModel)].

• Angular dependency injection is a mechanism that allows for managing dependenciesbetween components and services in an Angular application. It allows for creating loosely coupled components that can be easily tested and maintained.

• A component in Angular is a building blockfor creating user interface elements. It encapsulates the logic and data of a specific part of the application and consists of a template, a class, and optionally, styles. Components are used to define the views in Angular applications and can be nested to create complex UI hierarchies.

• A template in Angular is an HTML filethat defines the structure and layout of a component. It can include Angular-specific syntax like data bindings, event bindings, and  Templates are used to define the views of Angular components and are compiled by the Angular framework at runtime to generate the final DOM that is rendered in the browser.

• Single-page applications are web applications that load oncewith new features just being mere additions to the user interface. It does not load new HTML pages to display the new page’s content, instead generated dynamically. This is made possible through JavaScript’s ability to manipulate the DOM elements on the existing page itself. A SPA approach is faster, thus providing a seamless user experience.

Decorators are a design pattern or functions that define how Angular features work. They are used to make prior modifications to a class, service, or filter. Angular supports four types of decorators, they are.

• Class Decorators
• Property Decorators
• Method Decorators
• Parameter Decorators

• Older versions of TypeScript not supported – Previous versions of Angular supported typescript 3.6, 3.7, and even 3.8.But with Angular 10, TypeScript bumped to TypeScript 3.9 .
• Warnings about CommonJS imports – Logging of unknown property bindings or element names in templates is increased to the “error” level, which was previously a “warning” 
• Optional strict setting – Version 10 offers a stricter project setup when you create a new workspace with ng new command.

ng new --strict

NGCC Feature – Addition of NGCC features with a program based entry point finder.

• Updated URL routing
• Deprecated APIs– Angular 10 has several deprecated APIs.
• Bug fixes– With this Angular 10 version, there have been a number of bug fixes, important ones being the compiler avoiding undefined expressions and the core avoiding a migration error when a nonexistent symbol is imported.
• New Default Browser Configuration– Browser configuration for new projects has been upgraded to outdo older and less used browsers.

• Pipes are simple functions designed to accept an input value, process, and return as an output, a transformed valuein a more technical understanding. Angular supports several built-in pipes. However, you can also create custom pipes that cater to your needs.Some key features include.

1. Pipes are defined using the pipe “|” symbol.
2. Pipes can be chainedwith other pipes.
3. Pipes can be provided with arguments by using the colon (:) sign.

• These pipes are pipes that use pure functions.As a result of this, a pure pipe doesn’t use any internal state, and the output remains the same as long as the parameters passed stay the same. Angular calls the pipe only when it detects a change in the parameters being passed. A single instance of the pure pipe is used throughout all components.

• For every change detection cyclein Angular, an impure pipe is called regardless of the change in the input fields. Multiple pipe instances are created for these pipes. Inputs passed to these pipes can be 

• NgModules are containers that reserve a block of code to an application domain or a workflow. @NgModuletakes a metadata object that generally describes the way to compile the template of a component and to generate an injector at runtime. In addition, it identifies the module’s components, directives, and pipes, making some of them public, through the export property so that external components can use them.

• The Ahead-of-time(AOT) compiler converts the Angular HTML and TypeScript code into JavaScript code during the build phase, i.e., before the browser downloads and runs the code.

• Filters are used to format an expressionand present it to the user. They can be used in view templates, controllers, or services. Some inbuilt filters are as follows.

1. date– Format a date to a specified format.
2. filter– Select a subset of items from an array.
3. Json– Format an object to a JSON string.
4. limitTo– Limits an array/string, into a specified number of elements/characters.
5. lowercase– Format a string to lowercase.

• View encapsulation defines whether the template and stylesdefined within the component can affect the whole application or vice versa. Angular provides three encapsulation strategies :

1. Emulated– styles from the main HTML propagate to the component.
2. Native– styles from the main HTML do not propagate to the component.
3. None– styles from the component propagate back to the main HTML and therefore are visible to all components on the page.

AngularJS controllers control the data of AngularJS applications. They are regular JavaScript Objects. The ng-controller directive defines the application controller.

• The scope in Angular bindsthe HTML, i.e., the view, and the JavaScript, i.e., the controller. It as expected is an object with the available methods and properties. The scope is available for both the view and the controller. When you make a controller in Angular, you pass the $scope object as an argument.

• String Interpolation is a one-way data-binding technique that outputs the data from TypeScript code to HTML view. It is denoted using double curly braces.This template expression helps display the data from the component to the view.

{{data}}

• Template statements are properties or methods used in HTML for responding to user events.With these template statements, the application that you create or are working on, can have the capability to engage users through actions such as submitting forms and displaying dynamic content.

For example,

<button (click)="deleteHero()">Delete hero</button>

{{data}}

The template here is deleteHero. The method is called when the user clicks on the button.

• All the Angular apps are modular and follow a modularity system known asThese are the containers which hold a cohesive block of code dedicated specifically to an application domain, a workflow, or some closely related set of capabilities. These modules generally contain components, service providers, and other code files whose scope is defined by the containing NgModule. With modules makes the code becomes more maintainable, testable, and readable. Also, all the dependencies of your applications are generally defined in modules only.

Angular provides support to create custom directives for the following:

• Element directives − Directive activates when a matching element is encountered.
• Attribute − Directive activates when a matching attribute is encountered.
• CSS − Directive activates when a matching CSS style is encountered.
• Comment − Directive activates when a matching comment is encountered

• Transpiling in Angular refers to the process of conversion of the source codefrom one programming language to another. In Angular, generally, this conversion is done from TypeScript to JavaScript. It is an implicit process and happens internally.

• In order to perform animation in an Angular application, you need to include a special Angular libraryknown as Animate Library and then refer to the ngAnimate module into your application or add the ngAnimate as a dependency inside your application module.

• The transclusion in Angular allows you to shift the original childrenof a directive into a specific location within a new template. The ng directive indicates the insertion point for a transcluded DOM of the nearest parent directive that is using transclusion. Attribute directives like ng-transclude or ng-transclude-slot are mainly used for transclusion.

Events in Angular are specific directives that help in customizing the behavior of various DOM events. Few of the events supported by Angular are listed below:

• ng-click
• ng-copy
• ng-cut
• ng-dblclick
• ng-keydown
• ng-keypress
• ng-keyup
• ng-mousedown
• ng-mouseenter
• ng-mouseleave
• ng-mousemove
• ng-mouseover
• ng-mouseup
• ng-blur

Angular Global API is a combination of global JavaScript functions for performing various common tasks like:

• Comparing objects
• Iterating objects
• Converting data

There are some common Angular Global API functions like:

• lowercase:Converts a string to lowercase string.
• uppercase:Converts a string to uppercase string.
• isString:Returns true if the current reference is a string.
• isNumber:Returns true if the current reference is a number.

• In Angular, .subscribe()is basically a method on the Observable type. The Observable type is a utility that asynchronously or synchronously streams data to a variety of components or services that have subscribed to the observable.

Subscribe takes 3 methods as parameters each are functions:

• next:For each item being emitted by the observable perform this function
• error:If somewhere in the stream an error is found, do this method
• complete:Once all items are complete from the stream, do this method