Angular 10

JavaScript is the most in-demand programming language and Angular is the most popular JavaScript framework which is widely used. Angular 10 adds new capabilities and simplifies development of mobile and web applications.


Q.1 What is a Angular?
Angular is the name of a popular open-source JavaScript framework which is used to develop mobile and web applications.
Q.2 What is a Angular single-page application (SPA)?
A single-page application also abbreviated as SPA, is a web application or website which do not do a complete web page refresh against user interaction instead all necessary HTML, JavaScript, and CSS code is either retrieved by the browser with a single page load, or are dynamically loaded and added to the page as needed.
Q.3 What is Angular 10?

Angular 10 was released on June 24, 2020.

New features in Angular 10 include
•    Support for TypeScript v3.9, which has performance improvements for Angular builds
•    Angular package format does not include esm5 and fesm5 distributions
•    New Date Range Picker in the Material UI library of Angular 10
•    Warnings about CommonJS imports
•    Optional Stricter Settings
•    New Default Browser Configuration

Q.4 How does Angular 10 differs from AngularJS?

AngularJS
•    Based on MVC architecture
•    Uses JavaScript as primary language for development
•    Uses controllers
•    No mobile support

Angular 10
•    Based on Service/Controller
•    Uses TypeScript as primary language for application development
•    Has a component based UI approach
•    Extensive mobile web browser support

Q.5 What is TypeScript in Angular 10 ?
TypeScript is a typed superset of JavaScript programming language. It was created by Microsoft. TypeScript adds many features like optional types, classes, async/await, etc. Program developed in TypeScript, compiles to JavaScript. Angular is built in TypeScript and uses TypeScript as primary language.
Q.6 Explain the working of an Angular 10 application

Every Angular 10 application has a file named angular.json having all the application configurations. Inside the build section of the angular.json file, the main property of the options object is main.ts.

The main.ts file forms a browser environment for the application to execute, and calls a bootstrapModule function to bootstrap the application.  AppComponent is defined in app.component.ts file which interacts with the webpage and serves data to it.

Every component has 3 properties - Selector (for accessing the component), Template (has the HTML of the component) and StylesURL( has component-specific stylesheets)

After this, Angular calls the index.html file which calls the root component, app-root which is defined in app.component.ts.

Q.7 What is the benefit of Angular 10?
Angular 10 provides many built-in features like routing, state management, rxjs library and http services to quickly develop mobile and web applications, due to which it is has become popular. Angular is open-source and has long-term Google support.
Q.8 Explain the main components of Angular 10

The main components are
•    Template, is the view part of an Angular application.
•    Module, is the logical division of an Angular application. It contains component, directives, services etc.
•    Service, creates components to share across the entire application.
•    Component, the basic building blocks to control HTML views of an angular application
•    Databinding, connects application data with the DOM (2 types - Event binding and Property Binding)
•    Directives, provide logic by template directives. They are evaluated and DOM/HTML elements changed before a view is displayed
•    Metadata, added to an Angular class for more details.

Q.9 Briefly explain directives in Angular 10
Directives in Angular 10, add dynamism or behaviour to an DOM element or component instance. Directive extends HTML element behavior
Q.10 Briefly explain components in Angular 10
Components in Angular 10, are UI building block and subset of directives. They have a template, with a single component is to be initialized per element in a template.
Q.11 Briefly explain template in Angular 10

A template in Angular 10 is a HTML view to show data by using the binding controls of Angular 10, to properties of an Angular 10 component.

Template is either defined inline (by template property) or in a separate HTML file (link to component metadata by @Component)

Q.12 List available lifecycle methods in a Angular 10 application

•    ngOnChanges, is called if value of a data bound property changes.
•    ngOnInit, is called on initialization of the directive/component after the data-bound properties completes.
•    ngDoCheck, to detect and act on changes which Angular won't detect on its own.
•    ngAfterContentInit, is called against Angular projects external content into the component's view.
•    ngAfterContentChecked, is called after Angular checks the content projected into the component.
•    ngAfterViewInit, is called after Angular starting the component's views and child views.
•    ngAfterViewChecked, is called after Angular checks the component's views and child views.
•    ngOnDestroy, is called before Angular destroys the directive/component.

Q.13 What are different forms of data binding in Angular 10?

•    From the Component to the DOM - Can be Interpolation( adding property value from the component) or Property binding (passing value from the component to the specified property or simple HTML attribute)
•    From the DOM to the Component - Event binding (call specific method in component if a event occurs
•    Two-way binding - Data can flow both ways between DOM and component

Q.14 What is AOT compilation in Angular 10?
Angular 10 components and templates needs to be compiled before running inside the browser. The AOT or Ahead-of-Time compilation is used in Angular 10 against JIT(Just-in-Time) compilation due to better performance. In AOT compilation, the Angular 10 application compiles during the build time so, the browser loads the executable code and renders the application immediately, which leads to faster rendering and also has fewer AJAX requests.
Q.15 What is string interpolation in Angular 10?
String interpolation provides one-way data binding in Angular 10 and is used to display data from the component. Double curly braces {{ }} are used.
Q.16 What is the difference between Angular 10 expressions and JavaScript expressions?

•    Angular 10 expressions enable writing JavaScript in HTML which is not applicable with JavaScript expressions.
•    Angular expressions evaluation is under a local scope object and JavaScript expressions have global window object.
•    Loops, conditionals and exceptions cannot be used in Angular expressions
•    Angular expressions uses pipes or filters to format data before showing it

Q.17 What is Angular 10 CLI?
The Angular CLI is a command-line interface tool to initialize, develop, scaffold, and maintain Angular applications directly from a command shell. Angular CLI needs to be installed before using it.
Q.18 Illustrate the relevance of a service in Angular 10?
A service in Angular10 is used to provide a common functionality to various modules. Separation of concerns is achieved with a service as well as better modularity to store common functionality.
Q.19 Differentiate between constructor and ngOnInit
constructor is the default method of TypeScript classes for initialization. ngOnInit method is present in Angular 10 and needs to be specified for defining Angular bindings. It is recommended that all Angular 10 bindings be in ngOnInit method though constructor is called first. We need to implement OnInit interface for using ngOnInit method.
Q.20 Explain dependency injection in Angular 10?
Dependency injection or DI, involves a class enquiring for dependencies from external sources. Angular 10 has A dependency injection framework for resolving dependencies.
Q.21 What is better - inline and external template file?
Depends upon the organizational policy. Inline is apt for small size code and external template file for bigger views. Though the Angular CLI uses template file by default, which can be changed as well.
Q.22 Explain interpolation in Angular 10
Interpolation is a special syntax that Angular converts into property binding. It’s a convenient alternative to property binding. It is represented by double curly braces({{}}). The text between the braces is often the name of a component property. Angular replaces that name with the string value of the corresponding component property.
Q.23 What are template expressions in Angular 10?
A template expression after execution, sends a value to property of a target like HTML element, a component, or a directive. It is in quotes to the right of the = symbol in the property binding in Angular 10 and in interpolation it is in double curly braces.
Q.24 What are template statements in Angular 10?
A template statement react s to an event raised by a binding target. They are in quotes to the right of the = symbol.
Q.25 In Angular 10, using script tag inside template, will result in?
Angular 10 treats the script tag as unsafe which is removed and the text content of the script tag is intact.
Q.26 What are pipes in Angular 10?
A pipe in Angular 10, changes input data to a desired output like formatting input date to dd-mm-yyyy format.
Q.27 Illustrate a parameterized pipe in angular 10
A parametrized pipe takes optional parameters for transforming input data to desired output. It is created by declaring the pipe name with a colon ( : ) followed by the parameter value. Multiple parameters are separated with colons.
Q.28 Elucidate a custom pipe in Angular 10
Custom pipes are user defined pipes. Pipe class is imported from the core Angular library. The PipeTransform interface defines the custom transformation. The @Pipe decorator defines the pipe name.
Q.29 Differentiate between pure and impure pipe in Angular 10
Impure pipe is called frequently with every keystroke or mouse-move. A pure pipe is called if Angular 10 detects a change in the value or the parameters passed to a pipe.
Q.30 What is an observable in Angular 10?
Observable is used in pub-sub to support message passing amongst publishers and subscribers. Event handling and asynchronous programming is also managed by observables.
Q.31 Explain a bootstrapping module in Angular 10
It is the root module which is bootstrapped to launch the Angular 10 application. Every Angular 10 application has one Angular module called the root module. It is also called as AppModule.
Q.32 What is HttpClient in Angular 10?
HttpClient is a simplified client HTTP API in Angular 10 on top of XMLHttpRequest interface. It is in @angular/common/http package.
Q.33 Explain Error handling in HttpClient of Angular 10
Error handling in HttpClient is managed in the component by passing the error object as present, as a second callback to subscribe() method.
Q.34 What is RxJS in Angular 10?
RxJS is a library to compose asynchronous and callback-based code using Observables.
Q.35 What is multicasting in Angular 10?
Multi-casting is the process of broadcasting a message to multiple subscribers in a single execution in pub-sub implementation.
Q.36 What is the use of Angular Router?
Angular Router is used to provide navigation from one view to other as user perform application tasks. It is similar to navigation in a web browser.
Q.37 Why base href tag is used in Angular 10?
It is used to compose navigation URLs by the routing application and to set the application root.
Q.38 What is a router event in Angular 10?
Router emits navigation events by the Router.events property during each navigation. We can easily track the lifecycle of the route.
Q.39 How to define routes in Angular 10?
Routes definitions are configured in a router by using the RouterModule.forRoot() method. The result is added to the AppModule's imports array of Angular 10.
Q.40 What is the use of Angular Universal?
Angular Universal is a server-side rendering module of Angular 10 application and is also integrated with Angular CLI.
Q.41 Describe the utility of metadata json file in Angular 10?
The file provides an overview of structure of a decorator's metadata, as an abstract syntax tree(AST).
Q.42 Illustrate folding in Angular 10
In folding, the collector calculate an expression through collection and document the result in the .metadata.json instead of the original expression.
Q.43 What will enable configuration inheritance in Angular 10?
Configuration inheritance in Angular 10 can be provided by extending the tsconfig.json on angularCompilerOptions. Base file config is loaded and overridden.
Q.44 What is the use of any type cast function in Angular 10?
It is used to disable binding expression type checking
Q.45 What is the utility of non-null type assertion operator in Angular 10?
The non-null type assertion operator is used to restrain the Object is possibly 'undefined' error.
Q.46 Explain the use of a zone in Angular 10?
It is an execution context which carry on across async tasks. It Is used to run change detection processes by Angular, if native JavaScript operations raise events.
Q.47 What will trigger an animation in Angular 10?
Angular 10 uses the trigger() function to trigger animation. The function watches element in the HTML template and starts the action after a change occurs.
Q.48 Does every service class in Angular 10 must use injectable ?
If the service class in Angular 10 has other Angular decorators or have no dependencies then, it is not essential the service class in Angular 10 to have injectable.
Q.49 Explain template driven forms of Angular 10
Template driven forms uses template section by directives for their control, validation, etc which is custom written by the developer. These forms uses 2-way binding by utilizing the [(ngModel)] syntax.
Q.50 What will enable you to access the current route in Angular 10?
The url property of router package is used to access the current route in Angular 10.
Get Govt. Certified Take Test