Angular 7 Interview Questions

1. Question 1. What Is Angular?
   Answer :
   • Angular is a most popular web development framework for developing mobile apps as well as desktop applications.
   • Angular framework is also utilized in the cross platform mobile development called IONIC and so it is not limited to web apps only.
   • Angular is an open source framework written and maintained by angular team at Google and the Father of Angular is Misko Hevery.
   • Angular is written in TypeScript and so it comes with all the capabilities that typescript offers.
2. Question 2. What Is Architecture Overview Of Angular?
   Answer :
   Angular Architecture Overview :
   Angular is a most popular web development framework for developing mobile apps as well as desktop applications.
   Angular framework is also utilized in the cross platform mobile development called IONIC and so it is not limited to web apps only.
   Angular is an open source framework written and maintained by angular team at Google and the Father of Angular is Misko Hevery.
   The bootstrapping process creates the components listed in the bootstrap array and inserts each one into the browser (DOM)
    you can identify the seven main building blocks of an Angular Application.
   1. Component
   2. Templates
   3. Metadata
   4. Data Binding
   5. Directives
   6. Services
   7. Dependency Injection
    The basic building blocks of an Angular application are NgModules, which provide a compilation context for components.
    Angular app is defined by a set of NgModules and it always has at least a root module that enables bootstrapping, and many more feature modules.
   1. Components define Template views
   2. Components use services
   The Angular Module (NgModules) helps us to organize an application into connected blocks of functionality.
   The NgModule properties for the minimum “AppModule” generated by the CLI which are follow as -
    Declarations — Use to declare the application components.
    Imports —Every application must import BrowserModule to run the app in a browser.
    Providers — There are none to start.
    Bootstrap — This is a root AppComponent that Angular creates and inserts into the index.html host web page.
3. Question 3. How To Update Angular 6 To Angular 7?
   Answer :
   For updating Angular 6 to Angular 7,
   you should use a command:
   ng update @angular/cli @angular/core
4. Question 4. What Is Urlsegment Interface In Angular 7?
   Answer :
   UrlSegment Interface :
   UrlSegment interface represents a single URL segment and the constructor, properties, and methods look like below UrlSegment class i.e.
   class UrlSegment {
   constructor(path: string, parameters: {...})
   path: string
   parameters: {...}
   toString(): string
   }
    The UrlSegment is a part of a URL between the two slashes and it contains a path and matrix parameters associated with the segment.
5. Question 5. What Is Angular Compatibility Compiler (ngcc) In Angular 7?
   Answer :
   The ngcc Angular node_module compatibility compiler :
   • The ngcc is a tool which "upgrades" node_module compiled with non-ivy ngc into ivy compliant format.
   •  This compiler will convert node_modules compiled with Angular Compatibility Compiler (ngcc), into node_modules which appear to have been compiled with TSC compiler transformer (ngtsc) and this compiler conversions will allow such “legacy” packages to be used by the Ivy rendering engine.
   •  TSC transformer which removes and converts @Pipe, @Component, @Directive and @NgModule to the corresponding definePipe, defineComponent, defineDirective and defineInjector. 
6. Question 6. What Is Do Bootstrap (ng Do Bootstrap ) In Angular 7?
   Answer :
   Do Bootstrap Interface :
   Angular 7 added a new life-cycle hook that is called ng Do Bootstrap and an interface that is called Do Bootstrap.
   Example:
   //ng Do Bootstrap - Life-Cycle Hook Interface
   classApp Module implements Do Bootstrap {
    ng Do Bootstrap(appRef: ApplicationRef) {
   appRef.bootstrap(AppComponent);
     }
   }
7. Question 7. What Is Xmb?
   Answer :
   The XMB is basically a key value pairs with no deeper structure. It does have a mechanism for named placeholders, with descriptions and examples. The  messages for any given other language must be correspond 1:1.
8. Question 8. What Is Xmb Placeholders?
   Answer :
   The placeholders have one example tag () and a text node. The text node will be used as the original value from the placeholder, while the example will represent a dummy value.
9. Question 9. What's New In Angular 7?
   Answer :
   The major release and expanding to the entire platform including-
   •   Core framework,
   •   Angular Material,
   •   CLI
10. Question 10. What Is Ivy Rendering Engine In Angular 7?
    Answer :
    Ivy Rendering Engine :
    The Ivy rendering engine is a new backwards-compatible Angular renderer main focused on the following.
    • Speed Improvements
    • Size Reduction
    • Increased Flexibility
    The template functions for creating dynamically views are no longer nested functions inside each other.
    Now we use for loops that are nested inside other loops.
    Example:
    functionAppComponent(rf: RenderFlags, ctx: AppComponent) {
    functionulTemplateFun(rf1: RenderFlags, ctx0: any) {
    functionliTemplateFun(rf1: RenderFlags, ctx1: any) {...}
      }
    }
11. Question 11. What Is Key Value Pipe In Angular 7?
    Answer :
     Key Value Pipe:
    Change you object into an array of key value pairs that output array will be ordered by keys.
     By default it will be by Unicode point value.
    Syntax:
     {{your input expression | key value [:compareFn] }}
12. Question 12. What Are The Core Dependencies Of Angular 7?
    Answer :
    Core Dependencies:
    There are two types of core dependencies: RxJS and TypeScript.
    RxJS 6.3:
    RxJS version 6.3 is used by Angular 7. It has no changes in the version from Angular 6
    TypeScript 3.1:
    TypeScript version 3.1 is used by Angular 7. It is the upgrade from the version2.9 of Angular 6.
13. Question 13. Explain Bazel?
    Answer :
    Bazel is a test tool just like the Make, Maven and Gradle and it is an open-source build. Bazel utilizes the readable and high-level build language. It handles the project in a great number of languages and builds the product for a large number of platforms. Moreover, it supports multiple users and large codebases over several repositories.
14. Question 14. How To Generate A Class In Angular 7 Using Cli ?
    Answer :
    Create a class using below code:
    ng generate class [options]
    ng g class [options]
    Whose name refers the name of a class.
    Options refer to the project name, spec value in Boolean or type of a file.
15. Question 15. How Can You Create A Decorator In Angular?
    Answer :
    There are two ways to register decorators in Angular.
    These are:
• $provide.decorator 
• module.decorator

1. Question 16. How Can You Handle Events In Angular 7?
   Answer :
   There are various methods to handle events in Angular 7.
   These are:
   1. Binding to user input events: You are able to use the Angular event binding to answer to DOM event. User input triggers so many DOM events. It is a very effective method to get the input from the user.
   For example:
   <button (click)="onClickMe()">Click me!</button>
   2. Get user input from the event object: DOM carries a cargo of the information that possibly is valuable for the components. Here is an example to show you the keyup event of an input box to obtain the user's input after every stroke
   Example:
   src/app/keyup.components.ts (template v.1) 
   content_copy 
   template: ` 
   <input (keyup)="onKey($event)"> 
   <p>{{values}} </p>
   3. Key event filtering: Every keystroke is heard by the (keyup) event handler. The enter keys matter the most as it provides the sign of the user that he has done with the typing. The most efficient method of eliminating the noise is to look after every $event.keyCode and the action is taken only when the enter key is pressed.
2. Question 17. What Is The Difference Between Structural And Attribute Directives In Angular?
   Answer :
   Structural directives:
   These are used to alter the DOM layout by removing and adding DOM elements. It is far better in changing the structure of the view. Examples of Structural directives are NgFor and Ngif.
   Attribute Directives:
   These are being used as characteristics of elements. For example, a directive such as built-in NgStyle in the template Syntax guide is an attribute directive.