Anil Singh | Code-sample.com

How to create custom type definitions in Angular 2? What is Typing? Typings is the simple way to manage and install TypeScript definitions. It uses “typings.json”, which can resolve to the Typings Registry, NPM, HTTP and local files. Custom Type Definitions:- In Angular 2, when we including 3rd party modules. We also need to include the type definition for this module and if they do not provide one within the modules. If you want to try to install it with typings, typings install node – save If we cannot find the type definition in the registry, we can make an extensive definition in this file for now. For example as, declare module “ myModule ” { export function toDo(value: string ) : string ; } Stayed Informed   -  Angular 2 Interview Questions and Answers I hope you are enjoying with this post! Please share with you friends. Thank you!!

Are Typescript type definitions Required? No!, If the module does it properly using the typings property it will work nicely. Stayed Informed   -  Angular 2 Interview Questions and Answers I hope you are enjoying with this post! Please share with you friends. Thank you!!

In the AngularJs, we can use following methods to achieve this. 1.       $http Service 2.       $resource Service 3.       Rest Angular The example as, < ! DOCTYPE html > < html > < head > < script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js" > < /script > < script src = "https://code.angularjs.org/1.5.8/angular.js" > < /script > < script > var appController = function ($scope, $http) { $ http.get( "http://jsonip.com" ) .success( function (response) { $ scope.Info = response; }) .error ( function (response) { $ scope.message = "Error!!" ; }); } < /script > < /head > < body > < div ng - app ng - controller = "appController" > < h3 > How to call Restful APIs/Services in AngularJs? < /h3 > < div ...

These packages provide an easy to use angular 2 error logging system for applications and each logger has an Observable. //Install npm module. npm install //logging/save angular2-log //For Example System.config({ map: { 'angular2-log' : 'node_modules/angular2-log' }, packages: { 'angular2-log' : { defaultExtension: 'js' } } }); //Add angular2-logger library in your apps. import { Logger } from "angular2-logger/core" ; //Inject your logger into your objects and use it. export class Component { constructor( public Logger: Logger) { this.Logger .error ( 'This is custom error !' ); } } Live Result, For more go below links, http://www.bennadel.com/blog/3039-logging-error-streams-to-the-server-in-angular-2-beta-6.htm https://www.npmjs.com/package/angular2-log I hope It help you!

According to Angular 2 Docs , “ Angular 2 takes a web component-based approach to building powerful applications for the web. It is used along with TypeScript which provides support for ECMAScript 5 , ECMAScript 6, and ECMAScript 7  . ” Angular 2 Features and Benefits 1.        Mobile First 2.        Future Ready 3.        Flexible Development 4.        Speed and Performance 5.        Supports server-side pre-rendering 6.        Simple and Expressive 7.        Comprehensive Routing 8.        Animations 9.        Hierarchical Dependency Injection 10.    Support for Web Components 11.    Internationalizations and localization (i18n) and Accessibility Building Blocks ...

Hello everyone, I am going to share the CSS styling in Angular2 components . The Angular 2 components styling can be 1.      Inline styles 2.      CSS Style URLs and 3.      Template inline styles The Angular 2 components allow us to define both type of css that are inline css and styleUrls and the detail about it as given below. Components Inline CSS Styles         @Component({   selector: 'customers',   templateUrl: 'customers.html',   styles: [     .customer {        padding:0.3em;        background-color: #f5f5f;        box-shadow: inset 1px 1px 1px rgba(0,0,1,0.2);        border-radius:1px;        border: solid 1px #c1c1c;     }]     ...

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 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 ”. Stayed Informed  -  Angular 2 @Inputs All the above features are supported in  Angular 2  but added some extra feature like animations etc. Syntax:- <div [ hidden ]="! active " > Hello, this is active area! </div> Note: - Don't use hidden attribute with Angular 2 to show/hide elements. Question: - Don't use hidden attribute with Angular 2. Here is why? The hidden attribute is used to hide elements. Browsers are not supposed to display elements that have the hidden attribute specified. Browsers attach "display: none" styles to elements with hidden attribute. Example, import ...

Hello everyone, Today I am going to share the interesting articles about ng-cloak directive . 1. What is ng-cloak directive? 2. Why we use it? The ng-cloak directive are use to prevent the un-compiled elements from being displayed and un-compiled elements can be an element that hold and wait for incoming data. i.e. < div ng-cloack>{{ myCloackVar }}</ div > <div ng-cloack>{{ myCloackVar }}</div> If myCloackVar controller is not compiled or the myCloackVar data is not populated in ng-cloak prevent {{ myCloackVar }} from being displayed and display only the HTML div when the myCloackVar variable is compiled. I am going to share the example code sample with ng-cloak and without ng-cloak as given below. Click for live Plnkr Demo <!DOCTYPE html> <html> <head>    <link rel= "stylesheet" href= " http://getbootstrap.com/2.3.2/assets/css/bootstrap.css " >    <style> ...