AngularJs2

Angular2 Interview Questions.

In this post we will look at Angular2 questions. Examples are provided with explanation.


Q: What are the new features of Angular2?
    A: Angular 2 is written entirely in Typescript and meets the ECMAScript 6 specification.
  • Component-Based- Angular 2 is entirely component based. Controllers and $scope are no longer used. They have been replaced by components and directives.
  • Directives- The specification for directives is considerably simplified, although they are still subject to change. With the @Directive annotation, a directive can be declared.
  • Dependency Injection- Because of the improved dependency injection model in Angular2 there are more opportunities for component / object-based work.
  • Use of TypeScript-TypeScript is a typed super set of JavaScript which has been built and maintained by Microsoft and chosen by the AngularJS team for development. The presence of types makes the code written in TypeScript less prone to run-time errors. In recent times, the support for ES6 has been greatly improved and a few features from ES7 have been added as well.
  • Generics- TypeScript has generics which can be used in the frontend.
  • Lambdas with TypeScript- In TypeScript, lambdas are available.
  • Forms and Validations- Forms and validations are an important aspect of frontend development. Within Angular 2 the Form Builder and Control Group are defined.
Q: What is the need of Angular2?
A: 
Angular 2 is not just a typical upgrade but a totally new development. The whole framework is rewritten from the ground. Angular 2 got rid of many things like $scope, controllers, DDO, jqLite, angular.module etc. It uses components for almost everything. Imagine that even the whole app is now a component. Also it takes advantage of ES6 / TypeScript syntax. Developing Angular 2 apps in TypeScript has made it even more powerful. . Apart from that, many things have evolved and re-designed like the template engine and many more.

Q: What is TypeScript ? What is the need for it in Angular2
A: 
TypeScript is a typed super set of JavaScript which has been built and maintained by Microsoft and chosen by the AngularJS team for development.

Q: What is ECMA Script ?
A: 
ECMAScript is a subset of JavaScript. JavaScript is basically ECMAScript at its core but builds upon it. Languages such as ActionScript, JavaScript, JScript all use ECMAScript as its core. As a comparison, AS/JS/JScript are 3 different cars, but they all use the same engine... each of their exteriors is different though, and there have been several modifications done to each to make it unique. Angular2 supports ES6 and higher versions.

Q: What is @NgModule?
A:
 @NgModule is a decorator function. A decorator function allows users to mark something as Angular 2 thing (could be a module or component or something else) and it enables you to provide additional data that determines how this Angular 2 thing will be processed, instantiated and used at the runtime. So, whenever user writes @NgModule, it tells the Angular 2 module, what’s going to be included and used in and using this module.

Q: Which components are used to configure routing in Angular 2?
A:
 There are three main components that we use to configure routing in Angular 2-
  • Routes describes the application’s routes
  • RouterOutlet is a “placeholder” component that gets expanded to each route’s content
  • RouterLink is used to link to routes

Q: What is Traceur compiler ?
A: 
Traceur is a JavaScript.next-to-JavaScript-of-today compiler that allows you to use features from the future today. Traceur supports ES6 as well as some experimental ES.next features. Traceur's goal is to inform the design of new JavaScript features which are only valuable if they allow you to write better code.

Q: Why are decorators used in Angular 2 ?
A: 
In Angular 2, decorators allow developers to configure classes as particular elements by setting metadata on them. The most commons are the @Component one, for components and the @Injectable one, for classes you want to inject dependencies in.
Advanatges of using decorators are-
  • Separation of concerns.
  • Easy for tools to provide all kinds of support in templates like- error checking, auto-completion, graphical GUI designers
  • Support multiple modifications

Q: What are pipes in Angular 2 ?
A: 
Pipes in Angular 2 are a way to transform and format data right from your templates Out of the box you get pipes for dates, currency, percentage and character cases, but you can also easily define custom pipes of your own. Here for example we create a pipe that takes a string and reverses the order

Q: How can we achieve Internationalization using Angular 2 ?
A: 
It can be achieved using the directive i18n. Internationalization (or i18n, which stands for i--n) is the process of adapting software and web applications to multiple languages, allowing their application to be used by multiple language-speaking users. By ensuring that your application supports multiple languages, you can reach a broader audience and ensure a smooth user experience for multilingual users.

Q: What is component in Angular 2 ?
A: 
In Angular, a Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure.

Q: What is @Inputs in Angular 2? ?
A: 
@Input allows you to pass data into your controller and templates through html and defining custom properties. This allows you to easily reuse components and have them display different values for each instance of the renderer.

Q: What is @Outputs in Angular?
A:
 Components push out events using a combination of an @Output and an EventEmitter. This allows a clean separation between reusable Components and application logic.

Q: What are differences between Components and Directives?
A:
ComponentsDirectives
For register component we use @Component meta-data annotation.For register directives we use @Directive meta-data annotation.
Component is a directive which use shadow DOM to create encapsulate visual behavior called components. Components are typically used to create UI widgets.Directives is used to add behavior to an existing DOM element.
Component is used to break up the application into smaller components.Directive is use to design re-usable components.
Only one component can be present per DOM element.Many directive can be used in a per DOM element.
@View decorator or templateurl template are mandatory in the component.Directive don’t have View.

Q: What is Angular 4? Have you used Angular 4?   Features of Angular 4-
  • Ahead of Time compilation
  • Smaller and Faster
  • Animation Package
  • Support for Angular Universal
  • Animation as a separate package

Q: What is primeng? How can it be used with angular2?
A: 
PrimeNG is a collection of rich UI components for Angular 2. PrimeNG is a sibling of the popular JavaServer Faces Component Suite, PrimeFaces. All widgets are open source and free to use under Apache License 2.0, a commercial friendly license. PrimeNG is developed by PrimeTek Informatics, a company with years of expertise in developing open source UI components. AngularJS makes it possible to use predefined components for development like tables etc. This helps developers save time and efforts. Using PrimeNG developers can create awesome applications in no time

Another way to answer for Angular2 

What is Angular 2

Angular 2 is a JavaScript framework for developing web applications.
It is a complete rewrite of Angular 1.0 ,so learning AngularJS 1.0 is not required for creating Angular 2 applications.
It is well suited for developing mobile applications unlike AngularJS 1.0 which was suitable for building desktop applications.It is also much faster than Angular 1.0.
It supports the modern browsers as well as the older browsers.Applications are better structured than previous versions of Angular.It supports server side rendering for faster rendering of views even on slow devices such as mobile.The size of Angular 2 library is smaller compared to previous versions.Also Angular 2 applications use ahead of time compilation which makes them faster.

Which languages are used to write Angular 2 applications

Angular 2 applications can be written in any of the following languages:
  • Typescript   Prefered Language for developing Angular 2 applications.
  • Javascript
  • Dart
We don’t have to worry about the JavaScript or ECMAScript version as its the compiler’s responsibility to manage the version issues.
As Angular 2 is written in TypeScript so it is preferable to write Angular 2 applications in TypeScript or ECMA6. Typescript is the prefered language to use for developing Angular 2 applications.

Components

A component is a building block of Angular 2 application.Angular 2 application is created as a tree of components.A component is declared by using @Component() decorator function.
When we declare Component we define metadata for component.In this example we have defined selector and template metadata for the FirstComponent component.

Modules

Angular apps consists of different modules.Modules consists of collection of components,directives and services.
Angular modules are created using the NgModules() decorator function.
Every Angular application consists of a root module apart from other feature modules.Every modules is created using NgModule decorator function.

Template

View of a component is declared by using the template.It is the template which is rendered.
We can define template in line in the component template metadata property:
We can also define templates in separate html file and use the templateUrl property in component:

Data bindings which are supported in Angular 2

Interpolation   In interpolation binding we specify the binding using expressions
Property Binding  In property binding we bind the custom property using square brackets
Event Binding   In event binding we enclose the event name in parenthesis and assign the event handler method to the event:
Two-way Binding  In Angular 2 we define two way binding as:

How Angular 2 application is launched

There is a single root module in every Angular application.Angular application is launched by bootstrapping this root module.

What is router-outlet

The route which is matched by the router is used display the component.The template defined by the component is displayed in an area defined by the router-outlet

NgModule

Angular module is class decorated with the @NgModule decorator function.
Its a decorator function which has one argument ,a metadata object with properties describing the module.
Some of its important properties are:
  • declarations views which belong to this module.
  • exports declarations which are visible in the components of other modules.
  • imports other modules whose classes are needed in this module.
  • providers services which are provided by this module
  • bootstrap This property is set by the root module

What are the advantages of Angular 2 over Angular 1

Better performance because of these reasons
  • Better change detection.
  • Ahead of Time compilation (AOT) improves rendering speed.
  • Lazy Loading.
  • TypeScript can be used for developing Angular 2 applications.
  • Better syntax and application structure.

What is lazy loading in Angular2

Angular 2 application is a collection of modules and components.There are two ways we can load Modules:
  • Eager Module loading  Loading module at application startup
  • Lazy loading  Loading Module only when required
Module which is required can be loaded instead of loading all the modules at application initialization.This has the obvious advantage of improving the application startup time.
We enable lazy loading in Angular 2 by using the loadChildren property in route

AOT compilation

AOT compilation stands for  Ahead Of Time compilation, in it angular compiles  components to native JavaScript and HTML during the build time instead of runtime.
This drastically improves the performance of the Angular 2 application.With Just in time compilation ,the compilation happens on the users browser at runtime.In the case of Ahead of time compilation ,the application is compiled and optimized at the build time instead of run time.So this improves the rendering of the application UI.This approach should be used in production builds.

3 comments:

  1. Nice and good blog.Thanks for sharing this useful information. If you want to learn Angular js course online, please visit below site.
    Angularjs online training
    Angularjs online course
    Angularjs online training in Hyderabad
    Angularjs online training in kurnool
    Angularjs online course in kurnool

    ReplyDelete
  2. Really good information to show through this blog. I really appreciate you for all the valuable information that you are providing us through your blog.
    Angular JS Online training
    Angular JS training in Hyderabad

    ReplyDelete
  3. Great Info, Thanks For Sharing , keep it up we are here to learn more

    Great! I like to share it with all my friends and hope they will also like this information.
    ADF Training In Hyderabad
    ADF Online Training
    ADF Training
    ADF Training In Ameerpet
    ADF Training Online

    ReplyDelete