Home Blog

How To Setup Angular 6 Development Environment in Visual Studio Code

How To Setup Angular 6 Development Environment In Visual Studio Code

In this article, I will explain how to setup an angular 6 development environment in the Visual Studio code editor. We will create our first Angular 6 application.

Setup Angular 6 Development Environment


    • HTML, CSS and JavaScript
    • Basic of TypeScript

Development Environment

    • Node
    • Npm
    • Angular CLI
    • Text editor- a visual code

You need to set up your development environment before you can do anything. Find the below steps to set up the angular in the local environment:-

Step 1

First, you need to install Node.js. Open your browser and type the URL https://nodejs.org/en/ & download node.js, and install it.

download and install node.js


Step 2

After installing node js, open command prompt type node -v to verify that you are at latest node.js version 8.x or greater by running node. Now type npm -v to check npm version. If both the commands show their respective versions it means the node.js is installed successfully.

What is Angular in Programming and Why should I use it

what is angular in programming

In this angular 6 tutorial, I will explain what is angular in programming, and why should I use it.

What is Angular in Programming and Why use it

Angular is a JavaScript open-source front-end web application framework. It is primarily
sustained by Google together with an extended community of people and companies, to
approach many of the challenges faced when developing single page, cross-platform,
performant applications. It is fully extensible and works well with other libraries.

Angular is a great tool that will:

  • Enable you to create software quicker and with less effort.
  • Result in a more maintainable software.
  • Encourage good programming practices and design patterns like MVC.
  • Allow you to collaborate easier with other people.
  • Allow you to become proficient at a reasonable time.

New features in Angular 6

Version 6 angular released is focused less on the underlying framework, and more on the toolchain and on making it easier to move quickly with angular in the future.

  • Angular 6 itself has no major breaking changes.
  • Animations
    • Import from @angular/core
    • Import from @angular/animations
  • <template> tag
    • No more support for the <template > tag .<ng-template> should be used
      <template> tag
  • Registering provider

    • Before Angular 6, the ngModelChange event was emitted before the said form control
    • If we have an event handler for the ngModelChange event that checked the value through the control, the old value will be returned instead of the changed value.
    • Now, in Angular 6, ngModelChange has emitted the value after the value is updated in the form of control.
  • Angular Elements
    • Ability to use our angular component in other application.
    • Wrap an angular component in custom elements.
  • RxJS 6.0
    • Angular 6 now used RxJS 6 internally. So we need to update our application accordingly.
    • These changes provide developers an increase in performance and are easier to debug AJAX call stacks and improve modularity also, making it as backward compatible as possible.
  • lvy
    • Next generation rendering engine.
    • Increase the speed and decrease the application size.
    • Out in the near future

Angular CLI update

  • ng-update <package>
    • Analysis of your package.json
    • Recommend update to your application 3 parties can be provided update scripts using schematic.
  • ng-add
    • Add new capabilities to your application
    • ng add @angular/material

angular cli

How node.js makes the angular app development process easier for us:

  • Node allows you to spin up a lightweight web server to host your application locally in your system.
  • NPM (Node Package Manager) comes with node.js by default. NPM allows you to manage your dependencies.
  • Third and the most important, npm gives you angular cli or ng cli(angular command line interface).
  • Angular recommends the use of TypeScript. Now, your browser does not understand TypeScript. It needs to be trans piled to JavaScript.

Read more in Angular Documentation


I hope you liked this article based on what is angular in programming, and why should I use it. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

Download Crystal Reports for Visual Studio 2010 Free


In this article, I will explain what is crystal reports for visual studio and how to download and install crystal report for visual studio 2010.

Crystal Reports is a popular Windows-based report writer solution that allows a developer to create reports from a variety of data sources with a minimum of code to write. Crystal Reports is owned and developed by SAP.

Crystal Reports for Visual Studio 2010

Visual Studio installation does not contain SAP Crystal Reports and so we need to install it, you can download it from the below location:-

Download Crystal Reports for Visual Studio 2010

You need to download the executable file and then either Double Click or Right Click and click Open option from the Context Menu.crystal reports

The WinRAR self-extracting archive file will first extract its contents and then the installation will start.

crystal report

After the installation, you will find Crystal Reports in the Toolbox of Visual Studio.

Top competitors of Crystal Reports include Logi Analytics, Tableau Desktop, Cognos Analytics, Sisense, and Chartio.

What are some advantages of open source software

what are some advantages of open source software

Open source software is like some other. Nevertheless, it’s distinguished by its license or phrases of use, which ensures sure freedoms, in distinction to closed proprietary software which restricts these rights. This article gives a quick explanation of what are the advantages of using open source software.

Open source software is usually free software that you should use in your small business. Open source developers choose to make the source code of their software publicly available for the good of the community and to publish their software with an open source license – that means that different developers can see the way it works and add to it.

What are the advantages of Open Source Software for the Business

Open source software ensures the right to access and modify the source code and to make use of, reuse and redistribute the software, all with no royalty or different prices. In some circumstances, there may be an obligation to share enhancements with the broader community, thus guaranteeing world benefit.

Advantages of Open Source Software

Discover the below checklist of the advantages of open source software:-

    • Use the software without access restrictions, inside the phrases of the license.
    • View the source code.
    • Enhance and add to the object and source code, inside the phrases of the license utilized and this will likely embrace a time period making it obligatory to publish the modified code on the community web site.
    • Distribute the source code

Open Source Software Examples

    • Mozilla‘s Firefox internet browser
    • Thunderbird email client
    • PHP scripting language
    • Python programming language
    • Apache HTTP internet server

Top Tip

Begin with the most well-liked open source software techniques which have constructed up a big community of help behind them, so you’ve got someplace to go to for those who want a recommendation.

Html Code for Facebook Home Page

facebook home page html code

The following example will provide you how to design facebook type login web page and download HTML code for facebook home page.

FB Style Home Page Design

Facebook is likely one of the prime and most visited social networking website on the earth. Each newbie and skilled web site developer needed to know how you can design a FB style home page using HTML and CSS. This example may also help you to build a clone of fb home web page.

FB Home Page Body Structure

  • fb-header: This part mainly divided into two sections left and right part. I’ve positioned the brand on the left part and Login and Password on the right part.
  • fb-body: This part mainly divided into two sections left & right part. I’ve positioned Map picture on left part and Registration form on the right part.
  • fb-footer: On this part, I’ve used language choice hyperlink, Copyright hyperlink and designed by hyperlink.

HTML source code for facebook login page

Find the below HTML code for facebook home page with CSS:-

Download HTML code for facebook login page

I hope you just like the article based mostly on how you can design FB home page in HTML and CSS. I wish to have suggestions from my blog readers. Your helpful suggestions, query, or feedback about this article are always welcome.