Angular Interview Questions

1. define AngularJS?
1. AngularJS is an open-source JavaScript framework designed for creating dynamic single web page applications with fewer lines of code. 
2. What is Angular 2?
1. Angular is a framework to build large scale and high performance web application while keeping them as easy-to-maintain.
2. Components − The earlier version of Angular had a focus of Controllers but now has changed the focus to having components over controllers. Components help to build the applications into many modules. This helps in better maintaining the application over a period of time.
3. TypeScript − The newer version of Angular is based on TypeScript. This is a superset of JavaScript and is maintained by Microsoft.
4. Services − Services are a set of code that can be shared by different components of an application. So for example if you had a data component that picked data from a database, you could have it as a shared service that could be used across multiple applications.
3. What are the key components of Angular 2?
1. Modules − This is used to break up the application into logical pieces of code. Each piece of code or module is designed to perform a single task.
2. Component − This can be used to bring the modules together.
3. Templates − This is used to define the views of an Angular JS application.
4. Metadata − This can be used to add more data to an Angular JS class.
5. Service − This is used to create components which can be shared across the entire application.
4. Explain Modules in Angular 2.
1. Modules are used in Angular JS to put logical boundaries in your application. Hence, instead of coding everything into one application, you can instead build everything into separate modules to separate the functionality of your application. A module is made up of the following parts −
1. Bootstrap array − This is used to tell Angular JS which components need to be loaded so that its functionality can be accessed in the application. Once you include the component in the bootstrap array, you need to declare them so that they can be used across other components in the Angular JS application.
2. Export array − This is used to export components, directives, and pipes which can then be used in other modules.
3. Import array − Just like the export array, the import array can be used to import the functionality from other Angular JS modules.
5. Explain Components in Angular 2.
1. Each application consists of Components. Each component is a logical boundary of functionality for the application. You need to have layered services, which are used to share the functionality across components.Following is the anatomy of a Component. A component consists of −
1. Class − This is like a C or Java class which consists of properties and methods.
2. Metadata − This is used to decorate the class and extend the functionality of the class.
3. Template − This is used to define the HTML view which is displayed in the application.
6. What are Angular 2 directives? Explain with examples?
1. A directive is a custom HTML element that is used to extend the power of HTML. Angular 2 has the following directives that get called as part of the BrowserModule module.
1. ngIf
1. The ngif element is used to add elements to the HTML code if it evaluates to true, else it will not add the elements to the HTML code.
2. *ngIf = 'expression'
2. ngFor
1. The ngFor element is used to elements based on the condition of the For loop.
2. *ngFor = 'let variable of variablelist'
7. How will you handle errors in Angular 2 applications?
1. Angular 2 applications have the option of error handling. This is done by including the ReactJS catch library and then using the catch function.
2. The catch function contains a link to the Error Handler function.
3. In the error handler function, we send the error to the console. We also throw the error back to the main program so that the execution can continue.
4. Now, whenever you get an error it will be redirected to the error console of the browser.
8. What is routing?
1. Routing helps in directing users to different pages based on the option they choose on the main page. Hence, based on the option they choose, the required Angular Component will be rendered to the user.
2. product.component.ts
3. import { Component } from '@angular/core'; @Component ({ selector: 'my-app', template: 'Products', }) export class Appproduct { }
4. app.module.ts
5. import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { Appproduct } from './product.component'; import { AppInventory } from './Inventory.component'; import { RouterModule, Routes } from '@angular/router'; const appRoutes: Routes = [ { path: 'Product', component: Appproduct }, { path: 'Inventory', component: AppInventory }, ]; @NgModule ({ imports: [ BrowserModule, RouterModule.forRoot(appRoutes)], declarations: [ AppComponent,Appproduct,AppInventory], bootstrap: [ AppComponent ] }) export class AppModule { }
6. app.component.ts
7. [routerLink] = "['/Product']
9. What is Dependency Injection? Explain with example?
1. Dependency injection is the ability to add the functionality of components at runtime. Lets take a look at an example and the steps used to implement dependency injection.
2. Create a separate class which has the injectable decorator. The injectable decorator allows the functionality of this class to be injected and used in any Angular JS module.
1. @Injectable() export class classname { }
3.  Next in your appComponent module or the module in which you want to use the service, you need to define it as a provider in the @Component decorator.
1. @Component ({ providers : [classname] })
10. Explain tsconfig.json file?
1. This file is used to give the options about TypeScript used for the Angular JS project.
2. { 'compilerOptions': { 'target': 'es5', 'module': 'commonjs', 'moduleResolution': 'node', 'sourceMap': true, 'emitDecoratorMetadata': true, 'experimentalDecorators': true, 'lib': [ 'es2015', 'dom' ], 'noImplicitAny': true, 'suppressImplicitAnyIndexErrors': true } }
2. The target for the compilation is es5 and that is because most browsers can only understand ES5 typescript.
3. The sourceMap option is used to generate Map files, which are useful when debugging. Hence, during development it is good to keep this option as true.
4. The "emitDecoratorMetadata": true and "experimentalDecorators": true is required for Angular JS decorators. If not in place, Angular JS application will not compile.
11.  package.json file?
1. This file contains information about Angular 2 project. Following are the typical settings in the file..
2. { "name": "angular-quickstart", "version": "1.0.0", "description": "QuickStart package.json from the documentation, supplemented with testing support", "scripts": { "build": "tsc -p src/", "build:watch": "tsc -p src/ -w", "build:e2e": "tsc -p e2e/", "serve": "lite-server -c=bs-config.json", "serve:e2e": "lite-server -c=bs-config.e2e.json", "prestart": "npm run build", "start": "concurrently \"npm run build:watch\" \"npm run serve\"", "pree2e": "npm run build:e2e", "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --killothers --success first", "preprotractor": "webdriver-manager update", "protractor": "protractor protractor.config.js", "pretest": "npm run build", "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"", "pretest:once": "npm run build", "test:once": "karma start karma.conf.js --single-run", "lint": "tslint ./src/**/*.ts -t verbose" }, "keywords": [], "author": "", "license": "MIT", "dependencies": { "@angular/common": "<2 .4.0="" angular-in-memory-web-api="" angular="" canonical-path="" code="" compiler="" concurrently="" core-js="" core="" devdependencies="" forms="" http="" jasmine-core="" jasmine="" karma-chrome-launcher="" karma-cli="" karma-jasmine-html-reporter="" karma-jasmine="" karma="" lite-server="" lodash="" node="" platform-browser-dynamic="" platform-browser="" protractor="" repository="" rimraf="" router="" rxjs="" systemjs="" tslint="" types="" typescript="" zone.js="">
4. There are two types of dependencies, first is the dependencies and then there are dev dependencies. The dev ones are required during the development process and the others are needed to run the application.
5. The "build:watch": "tsc -p src/ -w" command is used to compile the typescript in the background by looking for changes in the typescript files.
12. Explain systemjs.config.json file.
1. This file contains the system files required for Angular JS application. This loads all the necessary script files without the need to add a script tag to the html pages. The typical files will have the following code.
1. ** * System configuration for Angular samples * Adjust as necessary for your application needs. */ (function (global) { System.config({ paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { // our app is within the app folder app: 'app', // angular bundles '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platformbrowser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browserdynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', // other libraries 'rxjs': 'npm:rxjs', 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/inmemory-web-api.umd.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { app: { defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' } } }); })(this);
2. 'npm:': 'node_modules/' tells the location in our project where all the npm modules are located.
3. The mapping of app: 'app' tells the folder where all our applications files are loaded.
13. app.module.ts file.
1. mport { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
3. The import statement is used to import functionality from the existing modules. Thus, the first 3 statements are used to import the NgModule, BrowserModule and AppComponent modules into this module.
4. The NgModule decorator is used to later on define the imports, declarations, and bootstrapping options.
5. The BrowserModule is required by default for any web based angular application.
6. The bootstrap option tells Angular which Component to bootstrap in the application.
14. Angular Life Cycle
2. ngOnChanges − When the value of a data bound property changes, then this method is called.
3. ngOnInit − This is called whenever the initialization of the directive/component after Angular first displays the data-bound properties happens.
4. ngDoCheck − This is for the detection and to act on changes that Angular can't or won't detect on its own.
5. ngAfterContentInit − This is called in response after Angular projects external content into the component's view.
6. ngAfterContentChecked − This is called in response after Angular checks the content projected into the component.
7. ngAfterViewInit − This is called in response after Angular initializes the component's views and child views.
8. ngAfterViewChecked − This is called in response after Angular checks the component's views and child views.
9. ngOnDestroy − This is the cleanup phase just before Angular destroys the directive/component.