Major elements of Angular include - 

1. Components These are the basic building blocks of angular applications and are used to control HTML views.

2. Modules They refer to the set of angular basic building blocks like components, directives, services etc. An application is divided into logical pieces and each piece of code is called as "module" and used to perform a single task.

3. Templates These are used for representing the views of an Angular application.

4. Services It is used for creating components that can be shared over the entire application.

5. Metadata This can be used for adding more data to an Angular class.

The RxJS library also provides utility functions for creating and working with observables.

• Firstly, transforming existing code for async operations into observables.
• Secondly, iterating via the values in a stream.
• Thirdly, mapping values to different types.
• Then, filtering streams.
• Lastly, composing multiple streams.

Angular 7 is a open source Javascript framework, for developing dynamic web applications like single page applications or SPA.

The main advantage of using Angular 7 being, ease of development as it uses HTML like syntax to declare various functionality of a web application.

Angular 7 is maintained by Google and is the open source Javascript framework to develop robust and easy to maintain web applications using the MVC architecture.

Angular 7 features

• Released on Oct, 2018
• Angular 7 supports Typescript 3.1, RxJS 6.3 and Node 10.
• CLI Prompts helps users to explore the in-built SCSS support, routing, etc.
• Increased application performance by to automatically removing reflect-metadata from polyfills.ts file
• Has virtual scrolling to bind a long list of elements in small packets
• Support for dragging and dropping items in the list using CDK
• Can set up a budget limit of final bundle size default lower limit is 2MB and higher is 5 MB
• updates in Angular Elements
• support for Node 10, TypeScript3.1, and the RxJS6.3
• Angular 7 offers Do-Bootstrap and ngDoBootstrap
• @Output has better error handling

The use of Angular 7 is widespread. Angular 7 is used by software development companies for developing websites and web applications for their clients.

Angular 7 is used for developing dynamic web applications like single page applications or SPA.

Many organizations are also using Angular 7 to manage their web facing applications as it supports

• data binding
• reusable components
• form validation
• dependency injection
  
  

The difference between angular 6 and angular 7 is in terms of features between angular 6 and angular 7.

Angular 7 is the next release after angular 6.

Angular 6 features

• Released on April 2018
• Improvements in tool-chain
  
• removed <template> tag with “<ng-template>”
  
• Changed Registering provider
• Changes in ngModelChange event
  
• ng update <package> command in CLI for app update
• ng add command in CLI for new capability to add to app
• complete support of Angular Elements to create an Angular component and publish it as  web component
• supports configuration of navigation URLs within the Service Workers
• i18n is with runtime rendering
• New rendering engine added - Ivy
  

Angular 7 features

• Released on Oct, 2018
• Angular 7 supports Typescript 3.1, RxJS 6.3 and Node 10.
• CLI Prompts helps users to explore the in-built SCSS support, routing, etc.
• Increased application performance by to automatically removing reflect-metadata from polyfills.ts file
• Has virtual scrolling to bind a long list of elements in small packets
• Support for dragging and dropping items in the list using CDK
• Can set up a budget limit of final bundle size default lower limit is 2MB and higher is 5 MB
• updates in Angular Elements
• support for Node 10, TypeScript3.1, and the RxJS6.3
• Angular 7 offers Do-Bootstrap and ngDoBootstrap
• @Output has better error handling

• Fast Rendering: The browser loads the executable code and renders it immediately as the application is compiled before running inside the browser.
• Fewer Ajax Requests: The compiler sends the external HTML and CSS files along with the application, eliminating AJAX requests for those source files.
• Minimizing Errors: Easy to detect and handle errors during the building phase.
• Better Security: Before an application runs inside the browser, the AOT compiler adds HTML and templates into the JS files, so there are no extra HTML files to be read, thus providing better security for the application.

Also known as moustache syntax, string interpolation in Angular refers to a special type of syntax that makes use of template expressions in order to display the component data. These template expressions are enclosed within double curly braces i.e. {{ }}.

The JavaScript expressions that are to be executed by Angular are added within the curly braces and the corresponding output is embedded into the HTML code. Typically, these expressions are updated and registered like watches as a part of the digest cycle.

Angular is good for developing application for both web and mobile.  Angular  is a web open source Javascript framework from Google.

Angular is good for

• Modular application development
• Support for both mobile and web
• RESTful API
• Uses HTML type syntax and extends HTML
• Data Binding
• Dependency injection
• MVC architecture
• Directives, filters, modules, routes etc
• Separation of data model from view and user interaction

AOT in angular, refers to Ahead-of-Time (AOT) compiler.

 AOT converts Angular HTML and TypeScript into JavaScript during build phase before web browser downloads and runs that code

 Earlier, Angular used JIT compiler which ran after application is bootstrapped in the web browser. AOT did code analysis, generated code in memory.

 With AOT, Angular apps reduced requirement for change detection, or dependency injection during runtime.

It is a UI component library. Angular Material helps in creating attractive, consistent, and fully functional web pages as well as web applications. It does so while following modern web design principles, including browser portability and graceful degradation.

Yes, Angular JS MVC uses MVC architecture

MVC in AngularJS divides an application into three interconnected parts of

• Model - It manages the data, logic and rules of the application.
• View – is output representation of information, such as a chart or a diagram. Multiple views of the same information are possible.
• Controller - accepts input and converts it to commands for the model or view.
  
  

Interaction of MVC in AngularJS, is as

• Model receives user input from the controller.
• View is the presentation of the model in a particular format.
• Controller receives the input, optionally validates it and then passes the input to the model.

Upgrade of AngularJS 6 to angular 7 can be done by the ng update command, as

ng update @angular/cli @angular/core

The command updates Angular 6 to Angular 7 and Angular core and CLI are updated.

Every Angular application consists of components and templates which the browser cannot understand. Therefore, all the Angular applications need to be compiled first before running inside the browser. Angular provides two types of compilation -

• JIT(Just-in-Time) compilation
• AOT(Ahead-of-Time) compilation

While developing an AngularJS application, a developer needs to remember the correct ng-directive for binding an event, or a property. Whereas in Angular, property binding is done using "[ ]" attribute and event binding is done using "( )" attribute.

Angular can be used for building an efficient and powerful desktop, native, and progressive web apps. Angular provides support for building native mobile applications using Cordova, Ionic, or NativeScript.

Angular allows creating high performance, offline, and zero-step installation progressive web apps using modern web platform capabilities. The popular JS framework can also be used for building desktop apps for Linux, macOS, and Windows.

With the new Component Router, Angular apps load quickly. The Component Router offers automatic code-splitting so that only the code required to render the view that is requested by a user is loaded.

Angular uses HTML to render the UI of an application as it is a declarative language and is much easier to use than JavaScript.

It is an abstract layer of the application and acts as a bridge between the View and Model(business logic). It does not have any clue which View has to use it as it does not have a direct reference to the View. View and ViewModel are connected with data-binding so, any change in the View the ViewModel takes note and changes the data inside the Model. It interacts with the Model and exposes the observable that can be observed by the View.

Angular material design is

• a design language for web and mobile apps
• Angular material design was developed by Google in 2014.
• Angular material design is an adaptable system of guidelines, components, and tools that support the best practices of user interface design.
• Angular material design makes it easy for developers to customize their UI while still keeping a good-looking app interface that users are comfortable with.
• Angular material design initial focus was touch-based mobile apps, now it extends to web design.
• Angular material design defines the qualities that can be expressed by UI regions, surfaces, and components.

Angular releases a new kind of rendering pipeline and view engine, given that the purpose of angular view engine is to translate the templates and components that we have written into the regular HTML and JavaScript so it is easy for the browser to read it comfortably.

Ivy is believed to be splendid for the Angular Renderer. It is supported by Angular 7.

We can generate a class in Angular 7 using CLI by using the following code -

ng generate class [options]

ng g class [options]
Where

• name refers the name of a class.
• Options refer to the project name, spec value in Boolean or type of a file

Bazel refers to a test tool just like the Make, Maven and Gradle such that it is an open-source build. Bazel primarily utilizes readable and high-level build language.

Bazel handles the project in a great number of languages and builds the product for a large number of platforms. Also it supports multiple users and large codebases over several repositories.

Angular Elements enables to support content projection with the help of web standards for custom elements.
1. Angular Material Gets Minor Updates
2. Angular Material got better in the display that gives it an elegant look in the new update. Moreover, it also added a new homepage for the material, material.io. In this, you get tooling, design guidance, development components and stay up-to-date with the latest news.
3. In case you are using an Angular Material v7 then you observe a visual difference as library make changes to itself with the updated version of the Material design.
4. Better Accessibility for Selects - In the updated version, it includes a lot of new features to enhance accessibility for selects. It adds a new feature of the native select inside mat-form-field. It is far better and outperformed than the mat- select.
5. Both the select and mat-select are available so you can choose what you want to do.
6. Virtual Scrolling - The Component Dev Kit (CDK) is available in the market with the great virtual scrolling capabilities that the user can apply by importing the `ScrollingModule`!
7. Drag & Drop - The CDK in the new update also now recommends Drag & Drop, which possess these great hallmarks:

• Automated render as a user moves items
• It is new feature available only in Angular 7

8. Helper methods for reordering/transferring items in lists For reordering or transferring items in lists, you can use a helper method: moveItemInArray and transferArrayItem
9. Enhancing Application Performance
10. You will get enhanced application performance in Angular 7
11. A safeguard has come into play for the users of Angular 7. It gives a portent to new application builders when they are crossing the budget with their bundle size.  The warning occurs on 2 MB whereas an error occurs over 5 MB. But you don't need to frighten. You can change the limits simply in your angular.json file. The thing you have to do is add in a bit about the warnings and error sizes with budget details.

"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]

Redux refers to a way to manage application state and improve maintainability of asynchronicity in the application by providing a single source of truth for the application state, and a unidirectional flow of data change in the application.

ngrx/store is one implementation of Redux principles.

Angular Command Line Interface is a command line tool that is used to create, initialize, scaffold and to manage the whole angular application.

We can therefore use Angular Console tool to work with the command line to generate or work with different part of the Angular application, using CLI we can manage everything using commands.

Angular CLI is defined as a powerful tool to develop an Angular application without following complex stuff. Angular Console is a way to achieve different command line features using a simple GUI which is completely alternative to know all of the CLI commands.

In order to download the GUI tool, you can get the executable file from here. And after downloading the tool, it will look like this.

Angular 7 offers the CLI prompt where we can choose stylesheet type from the available option, but for an older version, CSS was the default format for styling the pages.

Therefore can use additional flag style to specify any other supported stylesheet type than css.

Data binding is considered as one of the important core concepts which is used to do the communication between the component and DOM. We can also say that Data binding is a way to add/push elements into HTML Dom or pop the different elements based on the instructions given by the Component.

Various types of data binding supported in order to achieve the data bindings in Angular, are
1. One-way Binding (Interpolation, Attribute, Property, Class, Style)
2. Event Binding
3. Two-way Binding

Therefore by using these different binding mechanisms, we can easily communicate the component with the DOM element and perform various operations.

We can define directive in Angular as a class with the (@) decorator and duty of the directive is to modify the JavaScript classes, we can also say that it provides metadata to the class. Generally, @Decorator changes the DOM whenever any kind of actions happen and it also appears within the element tag. The component is also a directive with the template attached to it, and it has template-oriented features.

The directive in Angular can be classified as -
1. Component Directive
2. Structural Directive
3. Attribute Directive

Module in Angular is considered as a very important part of the application, used to organize our angular app into a distributive manner. We can say that Modules plays an important role to structure our Angular application.

Such that each Angular application must have one parent module which is called an app module and it contains the list of different items that are -

1. Components

2. Service providers

3. Custom modules

4. Routing modules

5. Pipes

Module file group all of them into a single file; the same module will be useful for bootstrapping the application.