Angular CLI is a short form for Angular Command Line Interface. It is a command-line interface to scaffold and build angular apps using node.js style modules.

To use Angular CLI, we have to install it by using the following npm command:

npm install @angular/cli@latest

Following is a list of some useful commands which would be very helpful while creating angular projects:

• Creating New Project: ng new
• Generating Components, Directives & Services: ng generate/g
• Running the Project: ng serve -o

• Most front-end applications use either XMLHttpRequestinterface or the fetch() API to communicate with backend services over HTTP protocol. For the same purpose, Angular provides a simplified client HTTP API known as HttpClient. This is based on top of XMLHttpRequest interface. This HttpClient is available in the @angular/common/http package, which you can import in your root module as follows:

import { HttpClientModule } from '@angular/common/http';  

Following are some of the crucial advantages of HttpClient:

• HttpClient contains testability features.
• It provides typed request and response objects.
• It can interceptrequests and responses.
• It supports Observalbe 
• HttpClient also supports streamlinederror handling.

Angular bootstrapping is nothing but to allow developers to initialize or start the Angular application. Angular supports two types of bootstrapping:

• Manual bootstrapping
• Automatic bootstrapping

1. Manual bootstrapping :

• Manual bootstrapping provides more control to developersand facilitates them regarding how and when they need to initialize the Angular app. It is useful when professionals wish to perform other tasks and operations before Angular compiles the page.

2. Automatic bootstrapping :

• As the name specifies, automatic bootstrapping is started automaticallyto start the Angular app. The developers need to add the ng-app directive to the application’s root if they want Angular to bootstrap the application automatically. Angular loads the associated module once it finds the ng-app directive and, further, compiles the DOM.

To create an Angular project, you can follow these steps:

Prerequisites:

• Install Node.js:Angular requires Node.js to be installed on your computer. You can download and install Node.js from the official Node.js website: https://nodejs.org/
• Install Angular CLI:Angular CLI (Command Line Interface) is a powerful tool for creating and managing Angular projects. You can install Angular CLI globally on your computer using npm (Node Package Manager) by running the following command in your command prompt or terminal:

npm install -g @angular/cli

Once you have installed Node.js and Angular CLI, you can create a new Angular project by following these steps:

• Step 1:Open a command prompt or terminal window.
• Step 2:Navigate to the directory where you want to create your Angular project.
• Step 3:Run the following command to create a new Angular project using Angular CLI:

ng new project-name

Replace “project-name” with the name you want to give to your Angular project. This command will generate a new Angular project with the specified name and set up the basic file structure and dependencies.

• Step 4:After the project is created, navigate to the project directory using the cd command. For example:

cd project-name

• Step 5:Now, you can use Angular CLI commands to generate components, services, directives, and other Angular features as needed. For example, to generate a new component, you can run the following command:

ng generate component component-name

Replace “component-name” with the name you want to give to your component. This command will generate a new Angular component with the specified name, along with its associated files, and update the necessary configuration files.

• Step 6:Finally, you can use the ng serve command to start the development server and see your Angular project in action in your web browser. Open a new command prompt or terminal window, navigate to your project directory, and run the following command:

ng serve

This will build your Angular project and start the development server. You can then open your web browser and navigate to http://localhost:4200/ to see your Angular app running.

That’s it! You have successfully created an Angular project using Angular CLI. You can now start building your Angular application by adding components, services, and other Angular features as needed, and customize your project according to your requirements.

• Filters in Angular are used for formatting the value of an expression in order to display it to the user. These filters can be added to the templates, directives, controllersor services. Not just this, you can create your own custom filters. Using them, you can easily organize data in such a way that the data is displayed only if it fulfils certain criteria. Filters are added to the expressions by using the pipe character |, followed by a filter.

The application module i.e. AppModule is loaded eagerly before application starts. Whereas there is something called feature modules which holds all the features of each module which can be loaded in two ways namely eagerly or lazily or even preloaded in some cases.

1. Eager loading:

• To load a feature module eagerly we need to import it into an application module using imports metadata of @NgModule decorator.Eager loading is highly used in small size applications. In eager loading, all the feature modules will be loaded before the application starts.This is the reason the subsequent request to the application will always be faster.

2. Lazy loading:

• To load a feature module lazily we need to load it using loadChildren propertyin route configuration and that feature module must not be imported in the application module. Lazy loading generally is useful when the application is growing in size. In lazy loading, feature modules will be loaded on demand and hence application start will be faster.

• Angular templates are used to define the UI elements of an Angular application. They are written in HTML and can contain Angular-specificsyntax like directives, bindings, and event handling.
• Angular templates are used to define the views of Angular components, and they are compiled by the Angular frameworkat runtime to generate the final DOM that is rendered in the browser. Templates can include data bindings that allow for displaying dynamic data, event bindings that enable handling user interactions, and directives that provide additional functionality.

Some advantages of using Angular for web development are:

• It provides a structured and organized approach to building complex
• It supports two-way data binding,making it easy to manage UI updates.
• It promotes code reusability and modularity with its component-based
• It has a large and activecommunity, with extensive documentation and support.
• It supports a wide range of platforms,including web, mobile, and desktop.
• It has a robust testing ecosystem,making it easy to write unit and integration tests.
• It is backed by Google, ensuring its long-term supportand development.

• Annotations in angular are “only” metadataset of the class using the Reflect Metadata library. They are used to create an “annotation” array. On the other hand, decorators are the design patterns that are used for separating decoration or modification of a class without actually altering the original source code.

• A service()in Angular is a function that is used for the business layer of the application. It operates as a constructor function and is invoked once at the runtime using the ‘new’ keyword. Whereas factory() is a function which works similar to the service() but is much more powerful and flexible. factory() are design patterns which help in creating Objects.

• RxJS is a library, and the term stands for Reactive Extensionsfor JavaScript. It is used so that we can use observables in our JavaScript project, which enables us to perform reactive programming. RxJS is used in many popular frameworks such as Angular because it allows us to compose our asynchronous operations or callback-based code into a series of operations performed on a stream of data that emits values from a publisher to a subscriber. Other languages such as Java, Python, etc. also have libraries that allow them to write reactive code using observables.

• ngOnInit is a lifecycle hookand callback function used by Angular to mark the creation of a component. It accepts no arguments and returns a void type.

Example :

export class MyComponent implements OnInit {
constructor() { }
    ngOnInit(): void {
        //....
    }
}

ng-content is a concept in Angular, a popular JavaScript framework for building web applications, that allows for dynamic content projection in Angular components. It is used to pass content from the parent component to the child component, allowing the child component to render and display the content in a specific place within its template.

The main purpose of ng-content is to create flexible and reusable components in Angular. With ng-content, a parent component can provide content to its child component, which can then display that content in its own template. This allows for dynamic content injection and customization of child components by their parent components.

Here’s a high-level overview of how ng-content works:

1. Parent component :

• The parent component defines a template that contains one or more <ng-content></ng-content> These tags serve as placeholders for the content that will be projected into the child component.

2. Child component :

• The child component defines its own template, which may include one or more <ng-content></ng-content> tags at specific locations. These tags indicate where the content from the parent component will be projected.

3. Content projection :

• When the parent component is used in the application and its template is rendered, any content that is passed between the opening and closing tags of the parent component will be projected into the corresponding <ng-content></ng-content>tags in the child component. This allows the child component to display the projected content in its own template, preserving its structure, styles, and behavior.

ng-content provides a powerful way to create reusable components that can be customized with different content by their parent components. It enables component composition and encapsulation, allowing for more flexible and maintainable Angular applications.

Angular Universal is a package for enabling server-side rendering in Angular applications. We can easily make our application ready for server-side rendering using the Angular CLI. To do this, we need to type the following command:

ng add @nguniversal/express-engine

This allows our Angular application to work well with an ExpressJS web server that compiles HTML pages with Angular Universal based on client requests. This also creates the server-side app module, app.server.module.ts, in our application directory.

• In Angular, the common module that is available in the package @angualr/commonis a module that encapsulates all the commonly needed features of Angular, such as services, pipes, directives, It contains some sub-modules as well such as the HttpClientModule, which is available in the @angular/common/http package. Because of the modular nature of Angular, its functionalities are stored in small self-contained modules, which can be imported and included in our projects if we need these functionalities.

• Before JavaScript-based client-side frameworks,the way dynamic websites worked was by taking a template that is nothing but HTML code with spaces left empty for feeding data and content into those templates. This data was usually fetched from a database. After combining the template and data, we would serve the generated HTML content back to the user. As you can see, it was a bit complicated, and in some cases, it took a lot of processing.
• To overcome these issues, people came up with another approach in which they send the necessary data to render a page from their web servers to the web browsers and let JavaScript combine this data with a predefined template.Since now, even mobile phones are powerful enough to do this kind of processing, the servers can now just send the data to a client over the internet in a recognizable format, i.e., JSON, XML, etc. This drastically reduces the processing done on the servers and improves performance.

• Ahead of Time (AOT) compilation converts your code during the build time before the browser downloads and runs that code.This ensures faster rendering to the browser. To specify AOT compilation, include the –aot option with the ng build or ng serve command.
• The Just-in-Time (JIT) compilation process is a way of compiling computer code to machine codeduring execution or run time. It is also known as dynamic compilation. JIT compilation is the default when you run the ng build or ng serve CLI commands.

ViewChild and ContentChild are used for component communication in Angular, for example, if a parent component wants access to one or multiple child components.

• A ViewChild is any component, directive, or elementwhich is part of a template.
• A ContentChild is any component or elementwhich is projected in the template.

In Angular exist two different DOMs :

• Content DOM which has only knowledge of the template provided by the component at hand or content injected via <ng-content>.
• View DOM which has only knowledge of the encapsulated and the descending components.

• Both types of modules can help to modularize codeand Angular relies on both kinds of modules but they are very different.
• A JavaScript module is an individual file with JavaScript code, usually containing a class or a libraryof functions for a specific purpose within your app.
• NgModules are specific to Angular and a NgModule is a class marked by the @NgModuledecorator with a metadata object.

• @HostListener()function decorator allows you to handle events of the host element in the directive class. For example, it can be used to change the color of the host element if you hover over the host element with the mouse.
• @HostBinding()function decorator allows you to set the properties of the host element from the directive class. In this directive class, we can change any style property like height, width, color, margin, border, etc.