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.
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?
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.
7 . What is NgModule in Angular JS2
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.
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:
Also define templates in separate HTML file and use the templateUrl property in component:
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
14 . What are the Data bindings 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:
<button (click)="gotoDetail()">View Details</button>
- Two-way Binding : In Angular 2 we define two way binding as:
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?
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?