golden layout....

http://golden-layout.com/
free layout for ui.

Typeahead Example

1. A recommended way to install ng2-typeahead is through the npm package manager using the following command:

npm i ng2-typeahead --save

Alternatively, you can download it in a ZIP file.

1. Currently ng2-typeahead contains one directive: typeahead.

Example

install the plugin - https://www.npmjs.com/package/ng2-typeahead

Thanks,
Bhaskar

new Angular 5 forms functionality.

Angular 5 is out and many improvements have been made to the framework. 

In our latest video tutorial we've put special focus on the new Angular 5 forms functionality.

To improve performance, you can now specify when validation and update of values should be done.

Every time a FormControl value is changed, the validation will be performed accordingly. In the case of more complex validations, this can lead to a a noticeably worse performance.

With the new updateOn option, Angular 5 allows you to specify more precisely when this validation should be performed. You can select change, which specifies the previous behavior, submit or blur.

Learn how to work with updateOn options in both template-driven and reactive forms now:

https://codingthesmartway.com/angular5-forms-update/

Thanks,

Bhaskar

JSONPlaceholder - Fake Online REST API for Testing and Prototyping

JSONPlaceholder - Fake Online REST API for Testing and Prototyping

Intro

JSONPlaceholder is a free online REST service that you can use whenever you need some fake data.

It's great for tutorials, faking a server, sharing code examples, ...

https://jsonplaceholder.typicode.com/

Thanks,
Bhaskar

CKEditor online editor in Browser

CKEditor is an online WYSIWYG editor that is used to edit HTML documents (or their fragments) in the browser.

So what does this mean?

• The "online" part means that CKEditor works in a web browser (like Firefox, Chrome, Internet Explorer or Safari). It is thus not a standalone program that can be installed on your computer and then opened as a desktop application.
• The "WYSIWYG" part means that when you use CKEditor, you can style the text and add rich media contents to your document in real time by using the editor UI (toolbar buttons, dialog windows), and the result will be seen immediately. If you click the Bold button, the text will become bold; when you add an image, it will appear straightaway.
• CKEditor works on HTML, which is a markup language used to create web content. The huge benefit that CKEditor gives you, however, is that you do not need to see the HTML code directly nor understand its intricacies. The editor is sort of an intermediary here — it hides the HTML code from you and lets you just work the WYSIWYG way.
• The "edit HTML documents" part means that the editor can be used to edit any HTML content, like website content (blog articles, blog comments, forum posts), e-mails, or things that you write in web forms. That is not all, however: CKEditor can also be used in all sorts of online applications, i.e. all those that use HTML as their source text format and are run in the browser!

for more info https://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_installation

Thanks,

Bhaskar

ng-bootstrap examples

ng-bootstrap examples


https://ng-bootstrap.github.io/#/getting-started

More concepts on bootstrapping will be added here ....

Thanks,
Bhaskar

Promise vs Observable in Angular

https://stackoverflow.com/questions/37364973/angular-promise-vs-observable?rq=1

Both Promises and Observables will help us work with the asynchronous functionalities in JavaScript. They are very similar in most cases, however, there are some differences between the two, promises are values that will resolve in asynchronous way like http calls. On the other hand, observables deal with sequence of asynchronous events. The main differences are as below:

promise:

• having one pipe line
• usually only use with async data return
• not easy to cancel

observable:

• are cancellable
• are retriable by nature such as retry and retryWhen
• stream data in multiple pipe lines
• having array-like operations like map, filter etc
• can be created from other sources like events
• they are function, which could be subscribed later on

Also, I've created the graphical image for you below to show the differences visually:

Thanks,

Bhaskar

Wallaby.js is an integrated continuous testing tool for JavaScript

Wallaby.js is an integrated continuous testing tool for JavaScript. It runs your tests immediately as you change your code (you don’t even have to save the file) and displays various results (including the code coverage, error and console messages) right inside your code editor, next to your code. Wallaby.js is great for doing JavaScript TDD (Test-driven development) or BDD (Behavior Driven Development), but it works great for other approaches as well.

Wallaby.js consists of editor plugin to provide features such as the realtime feedback and code coverage:

for more information : https://wallabyjs.com/docs/index.html

YouTube Video for testing in Angular2

https://www.youtube.com/watch?v=bR7JbyjT8ZM

Thanks,

Bhaskar

ScrollMagic and TweenMax JS

ScrollMagic is a jQuery plugin which lets you use the scrollbar like a playback scrub control. Using this, you can build some extremely beautiful landing pages and websites.

Build automation for Angular 2 and TypeScript with Gulp

https://www.towfeek.se/2015/09/13/build-automation-for-angular-2-and-typescript-with-gulp/

Happy Coding,
Bhaskar

Good Link and guides for Angular2/4 and Web API

Good Link for Learning......

Pagination in Angular2/4
http://jasonwatmore.com/post/2016/08/23/angular-2-pagination-example-with-logic-like-google

Animation in Angular2/4 
http://jasonwatmore.com/post/2017/04/19/angular-2-4-router-animation-tutorial-example

Angular 2/4 JWT Authentication Example & Tutorial

http://jasonwatmore.com/post/2016/08/16/angular-2-jwt-authentication-example-tutorial

api-ms-win-crt-runtime-l1-1-0.dll is missing when opening ... stackoverflow.com I am facing this .dll library missing error: This programme can't start because api-ms-win-crt-runtime-l1-1-0.dll is missing. Try to reinstall this.

1.set the mongoDB bin path in environment varibles

2.cmd>enter mongod

any DLL error then install the above DLL.

deployd tool installation:

1.npm install -g deployd

2. > dpd --version

3.>dpd create <>

4. >dpd>restQuote>dpd

Angular2 and AngularJS good links for learn:

https://www.sitepoint.com/ultimate-angular-cli-reference/

https://www.metaltoad.com/blog/angular-2-http-observables-and-concurrent-data-loading

http://www.c-sharpcorner.com/article/cascading-drop-down-in-angular-2/   Cascading Dropdown

http://www.dotnetheaven.com/article/how-to-create-foreign-key-constraints-in-sql  SQL Server 

http://bootsnipp.com/snippets/featured/flat-user-profile-interface-ui  Bootstrap Templates

https://www.airpair.com/angularjs  angularJS 

http://www.thatjsdude.com/interview/js1.html

JS: Interview Algorithm - That JS Dude www.thatjsdude.com javascript interview questions, front end interview questions, javascript interview, algorithm in javascript, javascript interview materials, javascript interview ...

AngularJS Tutorial: A Comprehensive 10,000 Word Guide www.airpair.com 1 Intro to AngularJS. Angular is a client-side MVW JavaScript framework for writing compelling web applications. It's built and maintained by Google and offers a ...

How to Create FOREIGN KEY Constraints in SQL www.dotnetheaven.com In this article I am going to explain about FOREIGN KEY Constraints in SQL.

Cascading DropDown In Angular 2 - c-sharpcorner.com www.c-sharpcorner.com In this article, you will learn how to use cascading DropDownList using Angular 2.

http://www.c-sharpcorner.com/UploadFile/dhananjaycoder/directives-in-angularjs-simplified-with-examples-part-1/

Directives in AngularJS Simplified With Examples: Part 1 www.c-sharpcorner.com In this article we will learn Directives in AngularJS simplified with examples.

http://www.c-sharpcorner.com/blogs/pass-data-from-parent-controller-to-child-controller

Pass Data from Parent Controller to Child Controller in ... www.c-sharpcorner.com In this blog we will learn how to pass data from Parent controller to child controller and child controller to parent controller in AngularJs

w3schools:

https://www.w3schools.com/howto/howto_css_hero_image.asp

How To Create a Hero Image - w3schools.com www.w3schools.com body, html { height: 100%;} /* The hero image */.hero-image { /* The image used */ background-image: url("photographer.jpg"); /* Set a specific height */

http://www.tutorialrepublic.com/css-tutorial/css-pseudo-elements.php

CSS Pseudo-elements - Tutorial Republic www.tutorialrepublic.com CSS Pseudo-elements. The CSS pseudo-elements is a ways to style elements of the document that weren't explicitly defined by a position in the document tree.

http://www.prepbootstrap.com/converter  -- bootstrap

Bootstrap 3 to 4 Converter | PrepBootstrap www.prepbootstrap.com To use the converter, paste your Bootstrap 3 HTML code in the top text area and press the Convert Code button. Once ready, the converted code will appear ...

tool : http://json2ts.com/

https://blackrockdigital.github.io/startbootstrap-thumbnail-gallery/

https://css2sass.herokuapp.com/  // CSS 2 SASS

http://appinventor.mit.edu/   (online andriod app developement in chrome browser and it will crate the the .apk file to place into google store)

App Inventor ai2.appinventor.mit.edu App Inventor needs JavaScript enabled to run. Your browser might not be compatible. To use App Inventor for Android, you must use a compatible browser. Currently the ...

css2sass | Convert CSS Snippets to Syntactically Awesome ... css2sass.herokuapp.com CSS (paste your CSS code and convert!) Your Syntactically Awesome StyleSheets code

Thumbnail Gallery - Start Bootstrap Template blackrockdigital.github.io Toggle navigation Start Bootstrap. About; Services; Contact; Thumbnail Gallery

Rangle.io also has an Angular 1.x book which is geared towards writing Angular 1.x applications in an Angular 2 style. We hope you enjoy this book

https://angular-2-training-book.rangle.io/handout/project-setup/

Happy Coding,
Bhaskar

Authentication and Authorization in Angular2/4

Good Example and Demo for Authentication and Authorization:

http://jasonwatmore.com/post/2016/08/16/angular-2-jwt-authentication-example-tutorial


- ASP.NET Core + Angular 2/4 - User Registration and Login

https://www.pointblankdevelopment.com.au/blog/113/aspnet-core-angular-24-user-registration-and-login-tutorial-example

Practical use of tab components using Angular2

Developed a tab component app in Angular 2.0 for a tour company to demonstrate the practical use of tab components.

https://www.eduonix.com/blog/web-programming-tutorials/learn-develop-tabs-component-angular-2/

Learn How to Style Components in Angular 2

https://www.eduonix.com/blog/web-programming-tutorials/learn-style-components-angular-2/

Learn about routing and navigation in Angular 2

https://www.eduonix.com/blog/web-programming-tutorials/learn-routing-navigation-angular-2/

Learn About Using Guards to Protect Routes in Angular 2

https://www.eduonix.com/blog/web-programming-tutorials/learn-using-guards-protect-routes-angular-2/

Learn how to create a cheat sheet for Angular 2

https://www.eduonix.com/blog/web-programming-tutorials/learn-create-cheat-sheet-angular-2/

Learn Model Popup example with using Angular2

http://jasonwatmore.com/post/2017/01/24/angular-2-custom-modal-window-dialog-box

Angular Form Builder and Validation Management

https://coryrylan.com/blog/angular-form-builder-and-validation-management

WebPack in Angular2 (Some more concepts in same below URL)

http://www.dotnetcurry.com/angularjs/1320/using-webpack-bundling-with-angular-2

CI,CD for Angular 2 Applications in Azure

Zero touch testing and deployments” is a common DevOps mantra for your continuous integration and continuous deployment (CI/CD) pipeline. Also for you frontend projects.

In this post a how to use and configure Visual Studio Team Services for this CI/CD practice on Angular2 projects. Continue reading and/or watch this overview video:

http://www.clemensreijnen.nl/post/2016/10/17/CICD-Pipeline-for-Angular2-with-VSTS


Agile Planning in VSTS : 

      https://www.youtube.com/watch?v=Vj7DmdO4-Fg

Thanks,
Bhaskar

Angular2 best link for learners

Angualr2/4 examples :

http://voidcanvas.com/ng2-templates-tutorial-example/

http://voidcanvas.com/15-best-essential-vs-code-extensions-for-javascript-development/

Design Patterns in TypeScript:

https://www.youtube.com/watch?v=wAX8VA7FH8M&list=PLzvRQMJ9HDiSk1pnrKewLklYfCdu9Qjhy

Angular 2 Production Build – Minify an Angular App

http://devtech.in/2017/02/angular-2-production-build-minify-angular-app/

Dynamic Components creation:
http://blog.rangle.io/dynamically-creating-components-with-angular-2/

Chutzpah Test Adapter for the Test Explorer
https://visualstudiogallery.msdn.microsoft.com/f8741f04-bae4-4900-81c7-7c9bfb9ed1fenofollow

Type Script 10 important points,
http://www.developer.com/lang/top-10-things-to-know-about-typescript.html

https://narayanatechnicalworld.blogspot.in/2016/05/typescript-introduction.html

Best Site for Angular2/4 and TypeScript
https://www.eduonix.com/blog/web-programming-tutorials/12-must-know-angularjs-frameworks-to-develop-your-next-generation-apps/

Angular2 /4 Cheat Sheet 

http://www.dotnetcurry.com/angular/1385/angular-4-cheat-sheet

will add some more link in this space...

Thanks,
Bhaskar

“Lighthouse” feature in Chrome Browsers developer toolbar. This is one good way to Unit Test your Static Pages before handing them over for Integration.

Encourage you all to start using “Lighthouse” feature in Chrome Browsers developer toolbar. This is one good way to Unit Test your Static Pages before handing them over for Integration.

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication.
It has audits for Performance, Accessibility, Progressive web apps.

You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did. From there, use the failing audits as indicators on how to improve the page. Each audit has a reference doc explaining why the audit is important, as well as how to fix it.

For more details visit : https://developers.google.com/web/tools/lighthouse/