Laravel Example

• Universal server rendering- It is the library which is used to make building universal apps a smooth experience. It is an important feature of Angular 2.
• A mobile toolkit- It provides all the mobile toolkit and techniques to build high-performance mobile applications. The web applications which are developed using the mobile toolkit can be loaded on any device with or without internet connection which is a great advantage.
• A command line interface-it can generate components, routes, services, and pipes with the help of commands.
• Data binding- data binding has been improved in Angular 2. So, whatever DOM element property you need to bind, you just wrap it in square brackets. E.g.-

  <img[src]='product.image' />

• Modular- various modules have been removed from angular’s core, which has resulted in better performance.
• Modern- Angular 2 has been targeted as modern browsers in which various hacks that make angular harder to develop have been removed.

function transition (stateChangeExpr: string,steps: AnimationMetadata | 
  AnimationMetadata []):AnimationTransitionMetadata;

Declaration of component:

@component ({selector: 'great', template: 'hello {{name}}!'})

Class greet{

Name: string = 'world';

}

1. Observable is a more powerful way of handling HTTP asynchronous requests. Whereas, A promise handles a single event when an asynchronous operation completes or fails.
2. An observable is like a stream which allows passing zero or more events where the callback is called for each event. Whereas, A promise eventually calls the success or failed callback even when you don’t need the notification or the result it provides anymore.
3. Observable works with multiple values for a particular time. Whereas, Promises works with and even returns a single value at a time.
4. Observables can be canceled. Whereas, Promises cannot be canceled.
5. Observable supports map, filter, reduce and similar operators. Whereas, Promises have more readable codes with try/catch and async/await.
6. In observable, one operator ‘retry’ can be used to retry whenever needed. Whereas, Promises cannot be retried. A promise should have access to the original function that returned the promise in order to have a retry capability.

1. In Angular 2, a component is a directive with a view whereas a directive is a decorator with no view. Components are the specific type of directive that allows us to utilize web component functionality throughout our application. Whereas, Directive is the mechanism by which we attach behavior to elements.
2. A component is used to break up the application into smaller components. Whereas, Directive is used to design the re-usable components.
3. Components can be used to define pipes. Whereas, We cannot define pipes using directives.
4. Components can be present per DOM element. Whereas, Directive is used to add behavior to an existing DOM element.

• Google Chrome
• Firefox
• Edge
• IE for versions 9-11
• Safari
• iOS 7.1
• Android 4.1
• IE Mobile

1. ActivatedRoute consists of the information about a route associated with a component loaded in an outlet. Whereas, RouterState represents the state in which the writer actually is.
2. We need ActivatedRouteSnapchat to traverse all the activated routes. Whereas, during a navigation, after redirects have been applied, the router creates a RouterStateSnapshot.
3. ActivatedRouteSnapshot has old data. When route changes, ActivateRouteSnapshot has data from previous route. Whereas, the RouterState cares about application components, or, to be more specific, about their arrangements.

1. Update your route file
2. Install angular-router-loader and add the loader to your webpack configuration file.
3. Define the lazy routes
4. Import the routes to the module.

1. ngonInit is just a method in a class which structurally is not different to any other method in a class. Whereas, a constructor is a completely different thing. It will be called when an instance of a class is created.
2. A class constructor in angular is used to inject dependencies, which is called constructor injection pattern. Whereas, when ngOnInit is called, it has finished creating a component DOM, injected all required dependencies through constructor and processed input bindings.
3. A constructor is a default method of the class that is executed when the class is instantiated. Whereas, ngOnInit is a life cycle hook called by Angular 2 to indicate that angular is done creating the component.
4. ngOnInit relies on the binding of the component. Whereas, it is not the case when a constructor is used.

1. ngOnChanges
2. ngOnInit
3. ngDoCheck
4. ngAfterContentInit
5. ngAfterContentChecked
6. ngAfterViewInit
7. ngAfterViewChecked
8. ngOnDestroy

• Module – This is used to break the application into the logical pieces of the program code and each piece of code or module is designed to perform a single and unique task.
• Component – This is used to bring the modules together.
• Templates – This is used to define the Views of an Angular JS application.
• Metadata – This is used to add more data to an Angular JS application.
• Service – This component is used to develop the components, which can be used to share in the entire application.

• ngafterContentinit: It initializes the component content
• ngAfterConctentChecked: It checks the binding of the external content.
• ngafterViewinit: It creates the component view.
• ngAfterviewChecked: It checks the bindings of the component’s view.

• The property is more powerful and is used to bind any property of the elements.
• It is considered the closest cousin of ngshow and nghide.
• It sets the display property “display: none”.

• The catch function, which is used after adding the catch library contains the link to the Error handler function.
• And in this error, handler function, the errors are sent to the error console, and also the errors are thrown back to continue the execution.
• So, whenever an error occurs it will be redirected to the error console of the web.