Choose.. X Home Exams Certifications
 

Angular JS 2 Interview Questions

1 . What is Angularjs 2?

  • AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.
    Following are the features of AngularJS framework.
    • 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.

    • TypeScript − The newer version of Angular is based on TypeScript. This is a superset of JavaScript and is maintained by Microsoft.

    • 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.

2 . What are the key components of Angular 2?

  • Angular 2 has the following components
    • 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.

    • Component − This can be used to bring the modules together.

    • Templates − This is used to define the views of an Angular JS application.

    • Metadata − This can be used to add more data to an Angular JS class.

    • Service − This is used to create components which can be shared across the entire application.

3 . Explain Modules in Angular 2

  • 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 .
    • 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.

    • Export array − This is used to export components, directives, and pipes which can then be used in other modules.

    • Import array − Just like the export array, the import array can be used to import the functionality from other Angular JS modules.

4 . What is Component in Angular 2?

  • 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.
    @Component({selector: 'first-component',template: `

    Hello from first component

    `})export class FirstComponent {}
    When we declare Component we define metadata for component.In this example we have defined selector and template metadata for the FirstComponent component.

5 . Explain Components in Angular 2

  • 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
    • Class − This is like a C or Java class which consists of properties and methods.

    • Metadata − This is used to decorate the class and extend the functionality of the class.

    • Template − This is used to define the HTML view which is displayed in the application.

6 . What are Decorator in Angular JS?

  • Decorators are a design pattern that is used to separate modification or decoration of a class without modifying the original source code. In AngularJS, decorators are functions that allow a service, directive or filter to be modified prior to its usage.
    Decorators are functions that modify JavaScript classes. Angular has many decorators that attach metadata to classes so that it knows what those classes mean and how they should work.

7 . What is NgModule in Angular JS2

  • An NgModule is a class adorned with the decorator function. @NgModule takes a metadata object that tells Angular how to compile and run module code. It identifies the module's own components, directives, and pipes, making some of them public so external components can use them. @NgModule may add service providers to the application dependency injectors.
    • 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
    @NgModule({ 
    providers: list of providers,
    exports:list of components,
    imports:list of components })

8 . What are Angular 2 directives?

  • A directive is a custom HTML element that is used to extend the power of HTML. Directive decorator allows you to mark a class as an Angular directive and provide additional metadata that determines how the directive should be processed, instantiated and used at runtime
    There are three kinds of directives in Angular:
    • Components—directives with a template. Components are the most common of the three directives
    • Structural directives Structural Directives change the structure of the view or change the DOM layout by adding and removing DOM elements. Two examples are NgFor and NgIf.
    • Attribute directives Attribute directives are used as attributes of elements. Which used change the appearance or behavior of an element, component, or another directive. Example the built-in NgStyle directive

9 . What are Angular Modules?

  • Angular apps consist of different modules. Modules consist of a 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 module is created using NgModule decorator function.
    Modules are a great way to organize an application and extend it with capabilities from external libraries.

10 . What is Angular CLI?

  • Angular CLI is a command line interface to scaffold and build angular apps using node js style (common Js) modules. Not only it provides you scalable project structure, instead, it handles all common tedious tasks for you out of the box. Command Line Interface (CLI) can be used to create Angular JS application. It also helps in creating a unit and end-to-end tests for the application.

11 . 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

12 . What is Templates in Angular2 ? and how to define templates in Angular?

  • In AngularJS, templates are written with HTML that contains AngularJS-specific elements and attributes. AngularJS combines the template with information from the model and controller to render the dynamic view that a user sees in the browser.
    View of a component is declared by using the template. It is the template which is rendered.

    We can define a template in line in the component template metadata property:
    @Component({
    selector: 'hello-component',
    template: '{{Hello}}'
    })
    Also define templates in separate HTML file and use the templateUrl property in component:
    @Component({
    selector: 'hello-component',
    templateUrl: './hello.html'
    })

13 . What is Angular 2 Interpolation and Template Expressions?

  • Interpolation uses template expressions in double curly braces to display data from the component class and template reference variables.
    In interpolation binding, we specify the binding using expressions
    <h2>{{employee.name}}</h2>
    Double curly braces contain template expressions which allow us to read primitive or object values from component properties. Template expressions are similar to JavaScript and include features such as the ternary operator, concatenation and arithmetic.

14 . What are the Data bindings supported in Angular 2

    • Interpolation : In interpolation binding we specify the binding using expressions <h2>{{students.name}}</h2>
    • Property Binding : In property binding we bind the custom property using square brackets <h2 [innerText]="student.name"></h2>
    • Event Binding : In event binding we enclose the event name in parenthesis and assign the event handler method to the event: <button (click)="gotoDetail()">View Details</button>
    • Two-way Binding : In Angular 2 we define two way binding as: <input [(ngModel)]="employee.name"/>

15 . What are pipes in angular 2? What are types of pipes in angular?

  • A pipe in Angular 2 is the equivalent of filters in Angular JS. A pipe takes in data as input and transforms it to a desired output.
    Pipes are two types in Angular
    • Pure Pipes : Angular executes a pure pipe only when it detects a pure change to the input value. A pure change is either a change to a primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object).
    • Impure Pipes : Angular executes an impure pipe during every component change detection cycle. An impure pipe is called often, as often as every keystroke or mouse-move.

16 . What are Pure and impure pipes in Angular how to define?

  • There are two categories of pipes: pure and impure. Pipes are pure by default.
    Pure Pipes : Angular executes a pure pipe only when it detects a pure change to the input value. A pure change is either a change to a primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object).
    Angular ignores changes within (composite) objects. It won't call a pure pipe if you change an input month, add to an input array, or update an input object property.
    Impure Pipes : Angular executes an impure pipe during every component change detection cycle. An impure pipe is called often, as often as every keystroke or mouse-move. With that concern in mind, implement an impure pipe with great care. An expensive, long-running pipe could destroy the user experience.
    you can implement impure pipe by setting property pure: false
    Below code shows example of impure pipe:
    @Pipe({  
    name: 'flyingHeroesImpure',
    pure: false
    })
    export class FlyingHeroesImpurePipe extends FlyingHeroesPipe {}

    With that concern in mind, implement an impure pipe with great care. An expensive, long-running pipe could destroy the user experience

17 . What are the categories of pipes in Angular jS

  • There are two categories of pipes:
    • Stateless pipes are pure functions that flow input data through without remembering anything or causing detectable side-effects. In Angular2, most built-in pipes are stateless, it is the case with DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, and PercentPipe
    • Stateful pipes are those which can manage the state of the data they transform. A pipe that creates an HTTP request, stores the response and displays the output, is a stateful pipe. Stateful Pipes should be used cautiously. Angular provides AsyncPipe, which is stateful.

18 . What is Async pipe in Angular and how it works?

  • The Angular AsyncPipe is an interesting example of an impure pipe. The AsyncPipe accepts a Promise or Observable as input and subscribes to the input automatically, eventually returning the emitted values.
    The AsyncPipe is also stateful. The pipe maintains a subscription to the input Observable and keeps delivering values from that Observable as they arrive.

19 . Does angular providing OrderByPipe ?

  • No Angular wont provide .

20 . What is Observable in Angular JS.

  • Observable a proposed standard for managing async data that will be included in the release of ES7. Observables open up a continuous channel of communication in which multiple values of data can be emitted over time. From this we get a pattern of dealing with data by using array-like operations to parse, modify and maintain data.

21 . What is the difference between Promise and Observable in Angular JS?

  • Promise : A Promise handles a single event when an async operation completes or fails. There are Promise libraries out there that support cancellation, but ES6 Promise doesn't so far.

    Observable An Observable is like a Stream (in many languages) and allows to pass zero or more events where the callback is called for each event.
    Often Observable is preferred over Promise because it provides the features of Promise and more. With Observable it doesn't matter if you want to handle 0, 1, or multiple events. You can utilize the same API in each case.
    Observable also has the advantage over Promise to be cancelable. If the result of an HTTP request to a server or some other expensive async operation isn't needed anymore, the Subscription of an Observable allows to cancel the subscription, while a Promise will eventually call the success or failed callback even when you don't need the notification or the result it provides anymore.
    Observable provides operators like map, forEach, reduce, similar to an array and There are also powerful operators like retry() , or replay(), that are often quite handy.

    Angular 2 uses Rx.js Observables instead of promises for dealing with HTTP.

22 . What are Lifecycle Hooks in Angular 2 ?

  • A component has a lifecycle managed by Angular. Angular creates it, renders it, creates and renders its children, checks it when its data-bound properties change, and destroys it before removing it from the DOM.
    Angular offers lifecycle hooks that provide visibility into these key life moments and the ability to act when they occur.
    For Component the following sequence:
    ngOnChanges, → ngOnInit, → ngDoCheck, → ngAfterContentInit, → ngAfterContentChecked, → ngAfterViewInit, → ngAfterViewChecked, → ngOnDestroy
    A directive has the same set of lifecycle hooks, minus the hooks that are specific to component content and views.
    ngOnChanges, → ngOnInit, → ngDoCheck, → ngOnDestroy

23 . Explain LifeCycle Hooks Sequence in Angular?

  • Hook Purpose and Timing
    ngOnChanges()

    Respond when Angular (re)sets data-bound input properties.The method receives a SimpleChanges object of current and previous property values.

    Called before ngOnInit() and whenever one or more data-bound input properties change.

    ngOnInit()

    Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component's input properties.

    Called once, after the first ngOnChanges().

    ngDoCheck()

    Detect and act upon changes that Angular can't or won't detect on its own.

    Called during every change detection run, immediately after ngOnChanges() and ngOnInit().

    ngAfterContentInit()

    Respond after Angular projects external content into the component's view.

    Called once after the first ngDoCheck().

    A component-only hook.

    ngAfterContentChecked()

    Respond after Angular checks the content projected into the component.

    Called after the ngAfterContentInit() and every subsequent ngDoCheck().

    A component-only hook.

    ngAfterViewInit()

    Respond after Angular initializes the component's views and child views.

    Called once after the first ngAfterContentChecked().

    A component-only hook.

    ngAfterViewChecked()

    Respond after Angular checks the component's views and child views.

    Called after the ngAfterViewInit and every subsequent ngAfterContentChecked().

    A component-only hook.

    ngOnDestroy

    Cleanup just before Angular destroys the directive/component.Unsubscribe Observables and detach event handlers to avoid memory leaks.

    Called just before Angular destroys the directive/component.