Angular 7

Angular is one of the most popular frameworks for web application development. With the release of Angular 7, it has given even more features to web developers. We have list down some popular question and answers that can help you in your interview preparation.

Q.1 What do you know about the Angular framework?
Angular refers to a TypeScript-based open-source web framework and a platform. This is used for creating web/ mobile and desktop applications. However, some of the main features of the framework are Declarative templates Dependency injection End-to-end tooling etc.
Q.2 Differentiate between structural directive and attribute directive in Angular 7.
Structural directives are used for altering the DOM layout by removing and adding DOM elements. These directives are better in changing the structure of the view. Examples of Structural directives are NgFor and Nglf. Whereas, Attribute Directives are used as characteristics of elements. For example, a directive such as built-in NgStyle in the template Syntax guide is an attribute directive.
Q.3 Explain the terms declarations, providers, and imports in NgModule.
Declarations are used for making directives (including components and pipes) from the current module available to other directives in the current module. Selectors of directives, components or pipes are only matched against the HTML if they are declared or imported. Providers are used for making services and values known to DI. They are added to the root scope and they are injected to other services or directives that have them as dependency. A special case for providers is lazy loaded modules that get their own child injector. P And, imports make the exported declarations of other modules available in the current module.
Q.4 Explain the major elements of Angular?

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.

Q.5 Define the term Pipes.
A pipe takes in data as input and transforms it to the desired output. Moreover, you can chain pipes together in potentially useful combinations and write your own custom pipes. Angular comes with a stock of pipes such as DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, and PercentPipe.
Q.6 What is an Observable?
An Observable can be defined as a unique Object similar to a Promise that can help in managing an async code. Observables are not part of the JavaScript language so we have to rely on a popular Observable library called RxJS.
Q.7 Explain the utility functions provided by RxJS?

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.
Q.8 How can we control AOT compilation?
We can control your app compilation in two ways: Firstly, by providing template compiler options in the tsconfig.json file. Secondly, by configuring Angular metadata with decorators
Q.9 Define Activated route.
ActivatedRoute consists of the information related to a route linked with a component loaded in an outlet. It can also be used for traversing the router state tree. Further, the activated route will be injected as a router service for accessing the information.
Q.10 What do you know about Router Outlet?
The RouterOutlet refers to a directive from the router library and it acts as a placeholder that marks the spot in the template where the router should show the components for that outlet. Router outlet is used as a component. Syntax:

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
Q.22 What is the use of angular 7?

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

Q.23 What is the difference between angular 6 and angular 7?

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


Q.24 Is angular 7 released?
Yes, Angular 7 is released. Angular 7 was released on 18th October 2018
Q.25 Is angular 7 is stable?
Yes, Angular 7 is stable. Google released the stable version of Angular 7 on 18th October 2018.
Q.26 What are the Advantages of AOT compilation?
  • 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.


Q.27  What is string interpolation in Angular?

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.

Q.28 Explain the concept of templates in Angular.

Written with HTML, templates in Angular contains Angular-specific attributes and elements. Combined with information coming from the controller and model, templates are then further rendered to cater the user with the dynamic view.
Q.29 What is angular best used for?

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



Q.30 What is AOT in angular?

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.

Q.31 What is Angular Material?

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.

Q.32 Is Angular JS MVC?

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.
Q.33 How do I upgrade AngularJS 6 to angular 7?

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.

Q.34 What is AOT compilation and its advantages?

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
Q.35 What are Expression Syntax for AngularJS and Angular?


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.


Q.36 What is Cross-Platform App Development?

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.

Q.37 What do you understand by Code Splitting?

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.

Q.38 What do you understand by Declarative UI?

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

Q.39 What do you understand by ViewModel?

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.

Q.40 What is angular material design?

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.
Q.41 How will you create a decorator in Angular?
Primarily there are two ways to register decorators in Angular. Such that -
1. $provide.decorator, and
2. module.decorator
Q.42 How do you differentiate between Structural and Attribute directives in Angular?
Structural directives -The Structural directives are used to alter the DOM layout by removing and adding DOM elements. This is far better in changing the structure of the view. Some of the examples of Structural directives are NgFor and Nglf.

Attribute Directives - The Attribute Directives are being used as characteristics of elements. For instance a directive such as built-in NgStyle in the template Syntax guide is an attribute directive.
Q.43 According to you what are the Core Dependencies of Angular 7?
There are two types of core dependencies: RxJS and TypeScript.
1. RxJS 6.3 - RxJS version 6.3 is used by Angular 7. It has no changes in the version from Angular 6
2. TypeScript 3.1 - TypeScript version 3.1 is used by Angular 7. It is an upgrade from version2.9 of Angular 6.
Q.44 What do you understand by IVY Renderer and Is it supported by Angular 7?

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.

Q.45 How can you generate a class in Angular 7 using CLI?

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
Q.46 What do you understand by Bazel?

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.

Q.47 How can we update to Angular 4,5, 6 to Angular 7?
Following are the steps to upgrade -
1. We first need to update the Angular version globally by inserting the latest version via the terminal: sudo npm install -g @angular/cli@latest.
2. Second step is to upgrade the version locally in your project and need to assure the altering for the new version are displayed in the package.json file ng update @angular/cli
3. When it is done, upgrade all your dependencies and dev dependencies in package.json
4. To build Angular applications, Angular-devkit was introduced in Angular 6 that needs the dependency on the CLI projects.
5. With all of this, you'll also require to upgrade the version for Typescriptnpm install typescript@2.9.2 --save-dev
6. Then, you need to relocate the configuration of angular-cli.json to angular.json ng update @angular/cli and ng update @angular/core.
7. Use this command: ng update @angular/material in case of Angular material is used.
8. The next step is the removal of deprecated RxJS 6 features npm install -g rxjs-tslint rxjs-5-to-6-migrate -p src/tsconfig.app.json
9. When it is done, uninstall rxjs-compat as it is not required for Angular npm uninstall --save rxjs-compat
10. Also change import { Observable } from 'rxjs/Observable'; to import { Observable } from 'rxjs';
11. Finally, you are able to start your Angular 7 application by using ng serve
Q.48 What are the new features in Angular 7?

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"
}
]

Q.49 What do you understand by TestBed?
Angular Test Bed (ATB) is a higher level Angular Only testing framework that allows us to easily test behaviours that depend on the Angular Framework.

We still write our tests in Jasmine and run using Karma but we now have a slightly easier way to create components, handle injection, test asynchronous behaviour and interact with our application. The TestBed creates a dynamically-constructed Angular test module that emulates an Angular
Q.50 What do you understand by Redux and how is it related to an Angular app?

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.

Q.51 What are the new features of Angular 7?
Angular has recently released its newer version Angular 7, and with this version, we got several updated as well as the new features and these are listed below -
1. CLI Prompt
2. Angular Elements
3. Updates in Angular Material
4. Virtual scrolling
5. Drag and Drop
6. Setting budgets
7. Checking bundle size
8. Ivy rendering engine
9. Typescript 3.1 supports
Q.52 What do you understand by Angular CLI?

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.

Q.53 What do you understand by Angular Console?

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.

Q.54 How can you specify the type of stylesheet using the command?

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.

Q.55 What is the Template Expression?
Template expressions are the same expression that we use with JavaScript. But the difference is that we can use it within our Html template, so it looks like that we are using JavaScript along with Html but keep in mind that not every JavaScript expressions are supported like (new), (++) and (--).
Q.56 How do you define Data Binding in Angular?

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.

Q.57 How do we define Directive in Angular?

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

Q.58 What do you understand by Module in Angular?

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.

Q.59 What do you understand by Xmb?
XMB is defined as a key value pairs with no deeper structure. It has a mechanism for named placeholders, with descriptions and examples. The messages for any given other language must be corresponded.
Get Govt. Certified Take Test