Angular 2



21. What is Angular 2 events?  

For example, the component class and HTML template as given below.
import {Component} from 'angular2/core';

@Component({
    selector: 'myApp'
    templateUrl: '
' }) class MyComponent { myClicked() { } } export class myApp_Component { }

The HTML template as given below.


In the above, the myClicked() method will be called after clicked on button and we can also capture the event object using $event as parameter. i.e.


and also in component class
class MyComponent {
        myClicked(event) {
        }

 }


22. What is Angular 2 templateUrl and styleUrls?  

Angular 2 templateUrl :- The templateUrl is a function which returns HTML template.

Angular 2 styleUrls:- The styleUrls is a component which use to write inline styles, style Urls and template inline style.

The example as given below using templateUrl and styleUrls.
import {Component} from 'angular2/core';

@Component({
    selector: 'app'
    templateUrl: 'index.html',
    styleUrls: ['main_style.css']
})

export class App_Component { }



23. What is Angular 2 RouteParams?  

The Route Params :- The route parameter is used to map given URL's parameters based on the rout URLs and It is an optional parameters for that route.

Syntax :-
             params : {[key: string]: string}

Example,
@RouteConfig([
         {path: '/employ/:id', component: employe, name: 'emp'},
])

Router-outlet directive :- Router-outlet directive is used to render the components for specific location of your applications. Both the template and templateUrl render the components where you use this directive.

Syntax :-
 <router-outlet></router-outlet>
 

Router-link directive :- Router-link directive is used to link a specific parts of your applications.

Syntax :-
 <router-link></router-link>

Example,
<a [router-link]="['/AboutMe']">About Me</a>
 

The Route-Config :- The route config is used to map components to URLs.

Syntax :-
 @RouteConfig([
        {path: '/',        component: Home_Component, as: 'Home'},
        {path: '/AboutMe', component: AboutMe_Component, as: 'AboutMe'  }
        {path: '/ContactMe', component: ContactMe_Component, as: 'ContactMe'  }
    ])


24. What is Angular 2 hidden property?  

Angular 2 [hidden] is a special case binding to hidden property.

It is closest cousin of ng-show and ng-hide .

It is more powerful and use to bind any property of elements. Both the ng-show and ng-hide are used to manage the visibility of elements using ng-hide css class. It is also set the display property "display:none".

All the above features are supported in Angular 2 but added some extra feature like animations etc.

Example for Angular 2
<div [hidden]="!active">
    Hello, This is active!
</div>

Example for Angular 1
<div ng-show="active">
    Hello, This is active!
</div>



25. What is Uncaught reference error:System is not defined?  

We can Try to include the System JS file in our HTML header file and resolve this error.

Include SystemJS Script.
<script src="https://jspm.io/system@0.18.17.js"></script>

The Example for detail as given below.

index.html file
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css" />
    <script src="https://jspm.io/system@0.18.17.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.36/angular2.min.js"></script>
    <script>
      System.config({
        paths: {
          'main.js':'main.js'
        }
      });

      System.import('main.js');
    </script>
</head>

<body>
    <app></app>
</body>

</html>

main.js file
import {Component, View, bootstrap} from 'angular2/angular2';

@Component({
  selector: 'app',
  bindings: [Service]
})
@View({
  template: '{{greeting}} I am Anil!'
})
class App {
  constructor(service: Service) {
    this.greeting = service.greeting();
    setTimeout(() => this.greeting = 'Hi,', 2000);
  }
}

class Service {
  greeting() {
    return 'Welcome you!';
  }
}


26. How to import css using System import?  

Syntax :
System.import('./app/bootstrap/css/boots-trap.css!').then(() => {
    System.import('./app/main-app.css!');

});


27. How to Load external css style into Angular 2 components?  

The styles or styleUrls should only be used for css rules and It is affect the style of the template elements.

This is the best approaches to add styles directly to the components and the view encapsulation is set per component. It is use for some situations.

An example to add external styles to components.
@Component({
    selector: 'app',
    templateUrl: 'app/login.html',
    styleUrls: [
        'app/app.css',
        'app/main.css'
    ],
    encapsulation: ViewEncapsulation.None,
})


export class Component {}


28. What is Dependency Injection (DI) in Angular 2?  



Angular 2 Dependency Injection consists of three things.

1.Injector
2.Provider
3.Dependency

Injector :- The injector object use to create instances of dependencies.

Provider :- A provider is help to injector for create an instance of a dependency. A provider takes a token and maps that to a factory function that creates an object.

Dependency :- A dependency is the type of which an object should be created.



29. What is Inter-component communications?  

Component communication can and should be implemented in a loosely coupled manner. A component can declare input and output properties. To pass the data from a parent to a child component, the parent binds the values to the input properties of the child. The child has no need to know who provided the values; it just knows what to do with them.

If a component needs to pass the data to the outside world, it emits the events via the output property. (Emits to whom? It’s none of the component’s business. Whoever is interested can create a listener to the custom component’s event.)

This mechanism allows us to treat components as black boxes, that can get values in or send data out.Illustrating one of the implementations of the Mediator design pattern in Angular 2.



30. Why TypeScript?  

TypeScript is a superset of JavaScript but like Java it allows us to define new types. Declaring variables with types rather than the generic var opens the door to new tooling support, which we will find to be a great productivity enhancer. TypeScript comes with a static code analyzer, and as we enter code in our TypeScript-aware IDE (WebStorm/IntelliJ Idea, Visual Studio Code, Sublime Text, etc.) we’re guided by context sensitive help suggesting the available methods in the object or types of the function argument. If we accidentally use an incorrect type, the IDE will highlight the erroneous code.

Even if our TypeScript application uses a third-party library written in JavaScript, we can install a type definition file (having the extension .d.ts), containing type declarations for this library. Type declarations for hundreds of popular JavaScript libraries are freely available, and we can easily install them with Typings, a TypeScript Definition Manager. Imagine that we want to use jQuery (written in JavaScript) from our TypeScript code. The type-definition files for jQuery will contain declarations (with types) of all jQuery APIs so our IDE can prompt us with which types to use, or highlight any erroneous code.



.Net Interview Question

PHP Interview Question

Java Interview Question

AngularJS Interview Questions