Angular 2 is a completely revived component-based Javascript framework in which an application is a tree of loosely coupled components. It is a more advanced version of angularJS. It is more of an "all in one" framework so it also helps in creating a single website without getting trapped into different JS frameworks. An Angular 2 is a modular framework in which our code is divided into individual procedures that offer a similar kind of functionality, hence improving the testing, up-gradation and maintenance of the application. It has a lot of useful features such as- server-side rendering, cross-platform, and supports more languages than any other framework. It is a new typescript framework built around the concept of components which is paving the way for better and spacious development. We can even make hybrid applications using Angular 2 which gives us a sharp edge by providing us the flexibility to use the same standard codes for developing other applications.

Annotations are used to provide supplemental information about a program. Annotations do not change the action of a compiled program. Annotations help to associate metadata (information) to the program elements i.e. instance variables, constructors, methods, classes, etc.

@Component is an annotation that tells Angular, that the class, which the annotation is attached to, is a component

Caching of an observable data is done with the help of “observable.cache”. We can use caching in order to cache the response in the memory and then, on the next subscription, instead of requesting the remote server again. This operator is used at the end of the string. Caching is important for the performance, especially on bandwidth restricted devices and slow networks. You should have a good understanding of caching while working with promises but while translating it to observable, it is a bit difficult. Therefore, when interacting with observables, we typically set up a subscription on the consumer side and react to values coming through the pipe. We can easily add caching to the observables by adding publishReplay(1) and refCount.

Typings describe the contract of libraries you use. This allows the TypeScript compiler that what you use exist (classes, properties, ...).

You can install typings from a repository using the typings command or let the compiler find out them leveraging the strategy specified in the tsconfig.json file with the moduleResolution attribute.

For Angular2, they (.d.ts files) are resolved within the node_modules/@angular folder since the framework contains its typings. For other libraries, like Lodash, it's not the case. So you need to install them from the repository.

To define a typings file you can leverage the export declare class clause:

Hooks in Angular are functions that are called on particular stages of a component's life. There are eight main hooks for every component in Angular. They are ngOnChanges(), ngOnInit(), ngDoCheck(), ngAfterContentInit(), ngAfterContentChecked(), ngAfterViewInit(), ngAfterViewChecked(), and ngOnDestroy()

Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module syntax, i.e. import and export. The name and concept have been popularized by the ES2015 module bundler rollup.

Observables in angular are used to ensure if particular properties are being returned from API call. Observables help you manage asynchronous data, such as data coming from a backend service. Observables are used within Angular itself, including Angular’s event system and its HTTP client service. To use observables, Angular uses a third-party library called Reactive Extensions (RxJS).

<ng-template> is a template element that Angular uses with structural directives (*ngIf, *ngFor, [ngSwitch] and custom directives). These template elements only work in the presence of structural directives. Angular wraps the host element (to which the directive is applied) inside <ng-template> and consumes the <ng-template> in the finished DOM by replacing it with diagnostic comments.

The template in Angular 2 is used to define the views of an application. A template helps us to render HTML with some dynamic parts depending on our data. It allows us to express data and property binding, event binding and templating concerns. To be able to express those behaviors, Angular 2 comes with its own symbols: {{ }} for interpolation. [] for property binding.

Transitions between two states take place so that we can build simple animations between two states driven by a model attribute. Transition basically means navigating from the current state to a new state. In angular, the transition is an animation-specific function which is used in angular’s animation DSL language. Transition declares the sequence of animation steps that will be executed when the entered value is satisfied. A function is provided an argument for a transition and it will be executed each time a state change occurs. In this, if the function is true, then the animation will run else it won’t get executed.

These animation transitions are placed within the animation triggers. The transition depends upon what the animation was in the previous state and what it will become in the next state. In other words, if a transition is defined that matches the old/current state criteria then the associated animation will be triggered.

Dynamic Components are components whose location in the application is not defined at build-time and it is not used in any angular template. Instead of that these components, are instantiated and placed in the application at runtime.

Just in time or JIT compiler is one which actually builds every time the content is requested. It is something that we use while we are developing an application. Although it is great but it has some shortcoming like the binding error in the application get discovered during runtime, the package is huge and hence the site is slow to load, etc.

ECMAScript is a scripting language specification standardized by Ecma International in ECMA-262 and ISO/IEC 16262. It was created to standardize JavaScript to help foster multiple independent implementations.

ngFor directive is used to iterate over a collection in Angular 2 or above.TrackBy Option with *ngFor directive is used to track which items added or removed in the collection. The trackBy function takes the index and the current item as arguments and needs to return the unique identifier for this item.

EventEmitter is an Angular class which is used in components with the @Output directive to emit custom events synchronously or asynchronously and register handlers for those events by subscribing to an instance.

Angular Decorators are functions that are invoked with a prefixed @ symbol and immediately followed by a class, parameter, method or property. The decorator function is supplied information about the class, parameter or method, and the decorator function returns something in its place or manipulates its target in some way.

Pipes were earlier called filters in Angular1 and called pipes in Angular 2 and 4. It takes integers, strings, arrays, and date as input separated with | to be converted in the format as required and display the same in the browser.

Angular 2 [hidden] is a special case binding to hidden property. It is the closest cousin of ng-show and ng-hide. It is more powerful 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".

ViewChild: It is a property decorator that configures a view query. The change detector looks for the first element or the directive matching the selector in the view DOM. If the view DOM changes and a new child matches the selector, the property is updated.

ContentChild: It is a parameter decorator that configures a content query. It is used to get the first element or the directive matching the selector from the content DOM. If the content DOM changes, and a new child matches the selector, the property will be updated.

All content queries need to be set before the ngAfterContentInit callback is called.

Deep linking in Angular is the usage of the URL, which will take to a specific page (content) directly without traversing application from the home page. It helps in getting indexed so that these links can be easily searchable by search engines like Google, Bing, Yahoo.. etc.

You can achieve deep linking in Angular 2 by using app.routes .ts file in your application. It should be injected in the app.module.ts for use and imported as well because it is not a default one in angular 2. You have to mention the routes on your view of your base component.

A provider in Angular is an instruction to the Dependency Injection system on how to obtain a value for a dependency. Most of the time, these dependencies are services that you create and provide.

A service is a particular type of provider that is declared with its class name. You declare it either in your NgModule or in a specific component simply by adding providers: [MyService] to your configuration metadata.

NgZone is an injectable service for executing work inside or outside of the Angular zone. The most common use of this service is to optimize performance when starting a work consisting of one or more asynchronous tasks that don't require UI updates or error handling to be handled by Angular.

Class binding in Angular is used to set a class property of a view element. We can add and remove the CSS class names from an element's class attribute with class binding.

The class binding syntax is also like property binding. In property binding, we only specify the element between brackets. But in the case of class binding, it starts with the prefix class, followed by a dot (.), and the name of the class. You then bind the class value with CSS class name like class.class-name.

Lazy loading in Angular is a technique that allows you to load JavaScript components asynchronously when a specific route is activated. This can add some initial performance during the initial load, especially if you have many components with complex routing.