Angular 2



1. What is Angular 2?  

Short Answer

Angular 2 is the next version of Google’s massively popular MV* framework for building complex applications in the browser (and beyond).
Angular 2 comes with almost everything we need to build a complicated frontend web or mobile apps, from powerful templates to fast rendering, data management, HTTP services, form handling, and so much more.

AngularJS is by far the most popular JavaScript framework available today for creating web applications. And now Angular 2 and TypeScript are bringing true object oriented web development to the mainstream, in a syntax that is strikingly close to Java 8.

Long Answer

According to Google engineering director Brad Green, 1.3 million developers use AngularJS and 300 thousand are already using the soon to be released Angular 2.

At the end of 2014 Google announced that Angular 2 would be a complete rewrite of AngularJS, and they even created a new language “AtScript” that was meant to be used for writing Angular 2 applications.

But then Microsoft agreed to add support for decorators (a.k.a. annotations) to their TypeScript language (a strict superset of JavaScript), and so that emerged as the language for the development of the Angular 2 framework itself, and the recommended language for developing applications using the AngularJS framework.

We can also develop Angular 2 apps in JavaScript (both ECMAScript 5 and 6) and in Dart.

In addition, the Angular team integrated yet another Microsoft product - the RxJS library of reactive JavaScript extensions, into the Angular 2 framework.

Angular 2 is not an MVC framework, but rather a component-based framework. In Angular 2 an application is a tree of loosely coupled components.



2. What is Advantages of Angular 2?  

There is many more advantage of Angular 2.

1. The Angular 2 has better performance.
2. The Angular 2 has more powerful template system.
3. The Angular 2 provide simpler APIs, lazy loading and easier to application debugging.
4. The Angular 2 much more testable.
5. The Angular 2 provides to nested level components.
6. The Angular 2 execute run more than two programs at the same time.
7. Angular1 is controllers and $scope based but Angular2 is component based.
8. The Angular2 structural directives syntax is changed like ng-repeat is replaced with *ngFor etc.
9. In Angular2, local variables are defined using prefix (#) hash.

The Angular 2 architecture diagram identifies the eight main building blocks as.

1. Module
2. Component
3. Template
4. Outpouts
5. Data Binding
6. Directive
7. Service
8. Dependency Injection

The Angular 2 framework consists of several libraries, the some of them working as core and some are optional.


3. What is the anatomy of angular 2 application?  

An application is consists of a set of components, and some services, each component is comprised of a template,Classes and metadata (look to the following figure ).




4. what is an Angular 2 component?  

In Angular 2, “everything is a component.” Components are the main way we build and specify elements and logic on the page, through both custom elements and attributes that add functionality to our existing components.

Each component is comprised of a template, which is the HTML for the user interface. Add to that a class for the code associated with a view. The class contains the properties and methods, which perform actions for the view,A component also has metadata, which provides additional information about the component to Angular.




5. Can we write both Angular 1 and Angular 2 codes in a single project?  

1. Angular frameworks provide the support of mixing code of Angular 1 and Angular 2 in the same application.

2. We can write the mixing components of Angular 1 and Angular 2 in the same view.

3. We can inject services across frameworks of Angular 1 and Angular 2 in the same application.

4. Both Angular 1's and Angular 2's data binding works across frameworks in the same view.



6. What is the languages that you can use to build angular 2 application?  

* ECMAScript, or ES.

–ES 3 is supported by older browsers.
–ES 5 is the version currently supported by most modern browsers.
–The ES 6 specification was recently approved and renamed ES 2015(Most browsers don't yet support ES 2015).

* TypeScript

–TypeScript is the superset of JavaScript and must be transpiled.
–TypeScript has great tooling
–Inline documentation.
– Syntax checking.
– Code navigation.
– Advanced refactorings.


7. What is ECMAScript ES5/ES6?  

The ECMAScript is a scripting language which is developed by Ecma International Org.

Currently ECMAScript available in multiple versions that are ES5 and ES6 and both of versions fully supported to Chrome, Firefox, Opera, Safari, and IE etc.



8. What is Traceur compiler?  

The Traceur is a JavaScript compiler. The Traceur compiler is very popular now days use to allow use to use the features from the future. This compiler is fully supported to ES5, ES6 and also to vNext.

The main goal of Traceur compiler is to inform to design of new JavaScript features and wrote the programming code of new efficient and good manners.



9. Differenciate between Angular 2 Component Constructor vs. OnInit event?  

The constructor is a typescript feature. The constructor is only related to class instantiation and it’s nothing to do with Angular 2 and it is use to some initialization processing with respect to class hierarchies for the newly created instance.

The ngOnInit event is an Angular 2 life-cycle event/ method that are called after the first ngOnChanges. The ngOnInit method is use to parameters defined with @Input otherwise the constructor is OK.



10. What is Angular 2 Components Life cycle?  

In Angular 2 components life-cycle, there are several events occur to complete this life-cycle. Components Life-cycle events

Events Description
ngOnChanges Before Ng on init event, the data-bound input property value changes.
ngOnInit After the first ngOnChanges event, the ngOnInit event fire.
ngDoCheck During every Angular change detection cycle ngDoCheck event fire.
ngAfterContentInit After projecting content into the component ngAfterContentInit event fire.
ngAfterContentChecked After every check of projected component content the ngAfterContentChecked event fire.
ngAfterViewInit After initializing the component's views and child views the ngAfterViewInit event fire.
ngAfterViewChecked After every check of the component's views and child views the ngAfterViewChecked event fire.
ngOnDestroy Just before Angular destroys the directive or component the ngOnDestroy event fire.


11. What is Angular 2 Directives?  

* Angular 2 directives meta-data annotation is used to register the directives.
* The directives are used to add behavior to existing DOM elements.
* The directives are used to design a reusable component.
* More than one directive is used per DOM element.
* The directive does not have @View etc.

Example
import {Component, View} from 'angular2/core'';
@Component({
    selector: 'user-detail'
})

@View({
    template: "

{{userName}}

{{phone}}

" }) class userDetail { constructor(public userName: string, public phone: string) {} }


12. What is Angular 2 Template?  

A template is a HTML view that tells Angular 2, how to render your components in the views. The Angular 2 templates are very similar to Angular 1 but Angular 2 have some small syntactical changes.

You can see the changes as below

*     {}: Is use to rendering the HTML elements.
*     []: Is use to binding properties.
*     (): Is use to handling your events.
*     [()]: Is use to data binding.
*     *: Is use to asterisk Operations like *ngFor="#item of items”


13. Differenciate between Angular 2 components vs directives?  

Angular 2 components vs directives

@Components @Directive
@Component meta-data annotation is used to register the components. @Directive meta-data annotation is used to register the directives.
The components are used to create UI widgets. The directives are used to add behavior to existing DOM elements.
The components are used to split to application into smaller parts. The directives are use to design a reusable components.
Only one component is used per DOM element. More than one directive are used per DOM element.
In the components, @View, template and templateUrl are mandatory in the components. The directive do not have @View etc.

Example for using Component:
    import {Component, View} from 'angular2/core';

    @Component({
       selector: 'hello-world'
    })

    @View({
       template: "

Hello {{angular}}

" }) class hello { constructor(public angular: string) {} }


Example for using Directive:
import {Component, View} from 'angular2/core'';

@Component({
    selector: 'user-detail'
})

@View({
    template: "

{{userName}}

{{phone}}

" }) class userDetail { constructor(public userName: string, public phone: string) {} }


14. What is Angular 2 @Inputs?  

Angular 2 component is the core components of applications but we need to know how to pass data into components to dynamically.

For the same, we need to define an input (use like @Input decorator) for a component.

Howto pass data into components? We can see the below example for passing the user data in to the components.

For example,
import { Component, Input } from '@angular/core';

@Component({
  selector: “user-info”,
  template: “
Hello, This is {{ userInfo.name}}
” }) export class UserInfo { @Input() userInfo; constructor() { } }

The components is use to render the user information on the view.


15. What is Angular 2 Outputs?  

In Angular 2, if we want to bind an event on an element, we can use the new Angular 2 events i.e.

<button (click)="addUser()">Click</button>

The method addUser() will be called when user clicked on button.


16. What happen if you want to create a custom event?  

Now come to the outputs, if we want to create our custom event in Angular 2 that time we will use to new @Output decorator.

Example

import { Component} from 'angular2/core';
import {  bootstrap} from 'angular2/platform/browser';

@Component({
    selector: 'my-app',
    providers: [Service],
    template: '
Hello my name is {{name}}!
' }) class MyApp { constructor(service: Service) { this.name = service.getName(); setTimeout(() => this.name = 'Vikash Kumar,', 1000); } } class Service { getName() { return 'Hello'; } } bootstrap(App);

In the above example, we will need to import Output and Event-Emitter to create our new custom event.


import { Component , Output, EventEmitter} from 'angular2/core';
import {  bootstrap} from 'angular2/platform/browser';

@Component({
    selector: 'my-app',
    providers: [Service],
    template: '
Hello my name is {{name}}!
' }) class MyApp { constructor(service: Service) { this.userClicked.emit(this.user); this.name = service.getName(); setTimeout(() => this.name = 'Vikash Kumar,', 1000); } } class Service { getName() { return 'Hello'; } @Output() userClicked = new EventEmitter(); } bootstrap(App);

Now when we are using the components anywhere in our application, we can bind the our custom event i.e.




17. What is Angular 2 components css styles and styleUrls?  

The Angular 2 components styling can be
1.Inline styles
2.CSS Style URLs and
3.Template inline styles

The Angular 2 components allow us to define both type of css that are inline css and styleUrls and the detail about it as given below.

Components Inline CSS Styles
  @Component({
  selector: 'customers',
  templateUrl: 'customers.html',
  styles: [
    .customer {
       padding:0.3em;
       background-color: #f5f5f;
       box-shadow: inset 1px 1px 1px rgba(0,0,1,0.2);
       border-radius:1px;
       border: solid 1px #c1c1c;
    }]
         })
		 

Components CSS styleUrls
@Component({
  selector: 'customers',
  templateUrl: 'customers.html',
  styleUrls: ['customers.css']
})

//customers.css

.customer {
    padding:0.3em;
    background-color: #f5f5f;
    box-shadow: inset 1px 1px 1px rgba(0,0,1,0.2);
    border-radius:1px;
    border: solid 1px #c1c1c;
}

Components Template inline css styles
<style>
 .customer {
    padding:0.3em;
    background-color: #f5f5f;
    box-shadow: inset 1px 1px 1px rgba(0,0,1,0.2);
    border-radius:1px;
    border: solid 1px #c1c1c;
  }
</style>

<div class="customer">
  <div (click)="toggle()">
           {{IsVisible ? true : false }} {{CustomerUID}}
  </div>
  <div [hidden]="!IsVisible">
          
  </div>

</div>


18. What is ECMAScript (ES6) in Angular 2?  

The ECMAScript is known as now ES6. The ES6 is version 6. The ES6 is a scripting language and it developed by Ecma International org.



The JavaScript is an implementation of ES6. The ES6 features are fully supported to latest browsers(chrome, Firefox etc.)

A basic simple example with live demo of Add two numbers using ES6 as given below.

let AddTwoNum = (num1,num2) => num1+num2;
console.log(AddTwoNum(4,3));


19. Angular 2 toggle button?  

Syntax:

<button (click)="toggle()">Toggle Button</button>

//The Example for Angular2 Toggle as given below!
//Step-1
//Import root component.
import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2'

//Step-2
//Component
@Component({
  selector: 'toggle-app',
  bindings: []
})

//Step-3
//View template.
@View({
  template: `
      <div>
           <button (click)="toggle()">Toggle Button</button>
      </div>
      <div class="border">
        <div *ng-if="isActive">
                 <h1>Hello Angular 2, Toggle Button.</h1>
        </div>
      </div>
     <p>Status(isActive): {{isActive}}</p>
  `,
  directives: [CORE_DIRECTIVES]
})

//Toggle class App for active and hide div.
export class App {
     isActive: bool = true;

     toggle() {
        this.isActive = !this.isActive;
     }
}


20. Angular 2 ngif else expression?  

Syntax:

1.<div *ng-if="your-condition">...</div>
2.<div *ngif="your-condition">...</div>
3.<div template="ngIf your-condition">...</div>
4.<template [ngif]="your-condition">
<div>...</div>

</template>

The example as given below.
             
//Import root component.
import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2'


//Component
@Component({
  selector: 'toggle-app',
  bindings: []
})

//View template.
@View({
  template: `
      <div>
           <button (click)="toggle()">Toggle Button</button>
      </div>
      <div class="border">
        <div *ng-if="isActive">
                 <h1>Hello Angular 2, Toggle Button.</h1>
        </div>
      </div>
     <p>Status(isActive): {{isActive}}</p>
  `,
  directives: [CORE_DIRECTIVES]
})


export class App {
     isActive: bool = true;

     toggle() {
        this.isActive = !this.isActive;
     }
}


Java Interview Question

.Net Interview Question

PHP Interview Question

AngularJS Interview Questions