eInterviewQuestions

Angular2 Interviews Questions

All our users, you can also add/post your question and answer which is mostly asked by an Interviewer in Interviews, you all can suggest for any changes to make our website best & user friendly. please feel free to Post Question.

Q1. What is Angular 2?

Angular is an open source framework written and maintained by Google. 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 a most popular web development framework for developing mobile apps as well as desktop applications.

Q2. What are the new features of Angular 2? Why should we use Angular 2?

Angular 2 Features –

Component Based- It is entirely component based. It is not used to scope and controllers and Angular 2 are fully replaced by components and directives.

Directives- The directive can be declared as @Directive annotation.

A component is a directive with a template and the @Component decorator is actually a @Directive decorator extended with template oriented features.

Dependency Injection- Dependency Injection is a powerful pattern for managing code dependencies. There are more opportunities for component and object based to improve the dependency injection.

Use of TypeScript- Type represents the different types of values which are using in the programming languages and it checks the validity of the supplied values before they are manipulated by your programs.

Generics- TypeScript has generics which can be used in the front-end development.

Lambdas and Arrow functions – In the TypeScript, lambdas/ arrow functions are available. The arrow function is additional feature in typescript and it is also known as a lambda function.

Forms and Validations- Angular 2 forms and validations are an important aspect of front-end development.

Advandates of Angular 2.

1. It is entirely component based.

2. Better change detection

3. Angular2 has better performance.

4. Angular2 has more powerful template system.

5. Angular2 provide simpler APIs, lazy loading and easier to application debugging.

6. Angular2 much more testable

7. Angular2 provides to nested level components.

8. Ahead of Time compilation (AOT) improves rendering speed

9. Angular2 execute run more than two programs at the same time.

10. Angular1 is controllers and $scope based but Angular2 is component based.

11. The Angular2 structural directives syntax is changed like ng-repeat is replaced with *ngFor etc.

12. In Angular2, local variables are defined using prefix (#) hash. You can see the below *ngFor loop Example.

13. TypeScript can be used for developing Angular 2 applications

14. Better syntax and application structure

 


Q3. Advantages of Angular 2 over Angular1

Angular 2 is a re-written version of Angular1 and not an update. 

Angular 2

1. Angular 2 is a mobile-oriented framework

2. Angular 2 is a versatile framework, i.e. we have more choices for languages. We can use ES5, ES6, Typescript or Dart to write an Angular 2 code Whereas an 

3. In Angular 2 controllers are replaced by components and Angular 2 is completely component based.

Angular1

1. Whereas Angular1 was not developed with mobile base in mind.

2. Angular1 code can written by using only ES5, ES6 and Dart. We don’t have many choices of language in Angular1.

3. Whereas Angular1 was based on controllers whose scope is now over.


Q4. How to install Angular 2, create new application and server the application?

Install the Angular CLI

npm install -g @angular/cli

Create a new application

Create a new project named angular-tour-of-heroes with this CLI command.

ng new angular-tour-of-heroes

Serve the application

Go to the project directory and launch the application.

cd angular-tour-of-heroes

ng serve --open

The ng serve command builds the app, starts the development server, watches the source files, and rebuilds the app as you make changes to those files.

The --open flag opens a browser to http://localhost:4200/.


Q5. What is Angular components?

Components are the fundamental building blocks of Angular applications. They display data on the screen, listen for user input, and take action based on that input.

AppComponent distributed over three files:

app.component.ts— the component class code, written in TypeScript.

app.component.html— the component template, written in HTML.

app.component.css— the component's private CSS styles.


Q6. What is AOT Compilation? - Advantages and Disadvantages of Ahead-of-Time!

AOT compilation stands for “Ahead of Time compilation” and it are used to compiles the angular components and templates to native JavaScript and HTML during the build time instead of run-time.

The compiled HTML and JavaScript are deployed to the web server so that the compilation and render time can be saved by the browser. It is the big advantage to improve the performance of applications.

Advantages of AOT -

1. Faster download: - The Angular 2 app is already compiled so it is faster.

2. Faster Rendering: - If the app is not AOT compiled and the compilation process happens in the browser once the application is fully loaded. This has a wait time for all necessary components to be downloaded and then the time taken by the compiler to compile the app. With AOT compilation, this is optimized.

3. Lesser Http Requests: - It is supporting to the lazy loading. Actually, lazy loading is great concepts for sending HTTP request to the server. It is minimise the multiple requests for each associated html and css, there is a separate request goes to the server.

4. Detect error at build time: - In Angular 2, the compilation happens beforehand and most of the errors can be detected at the compile time and this process providing us a better application’s stability.

Disadvantages of AOT -

1.  AOT only works only with HTML and CSS and not for other file types. If required other file types that time we will need to follow the previous build step.

2.  We need to maintain AOT version of bootstrap file.

3.  We need to clean-up step before compiling.


Q7. Wht is the purpose of package.json file.

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.

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.


Q8. Explain app.module.ts file.

Modules are a great way to organize an application and extend it with capabilities from external libraries.

Every Angular app has at least one module, the root module. You bootstrap that module to launch the application.

Angular libraries are NgModules, such as FormsModule, HttpClientModule, and RouterModule. Many third-party libraries are available as NgModules such as Material Design, Ionic, and AngularFire2.

NgModules consolidate components, directives, and pipes into cohesive blocks of functionality, each focused on a feature area, application business domain, workflow, or common collection of utilities.

Modules can also add services to the application. Such services might be internally developed, like something you'd develop yourself or come from outside sources, such as the Angular router and HTTP client.

Modules can be loaded eagerly when the application starts or lazy loaded asynchronously by the router.

NgModule metadata does the following:

Declares which components, directives, and pipes belong to the module.

Makes some of those components, directives, and pipes public so that other module's component templates can use them.

Imports other modules with the components, directives, and pipes that components in the current module need.

Provides services that the other application components can use.