Avav Smith

Avav Smith

1560907901

What’s new in Angular 7. new Features and Updates

Introduction

Angular has released its latest version, Angular 7.0. In this article, we will explore the following points:

  • What is new in Angular 7.0
  • Creating your first Angular 7.0 application using Angular CLI
  • How to update your existing Angular application to Angular 7.0

What’s new in Angular 7.0?

  1. While creating a new Angular application, the Angular CLI will prompt the user to select if they want to add features like Angular routing or the format of the stylesheet they want to use in their application
  2. Angular 7.0 applications will use the Bundle Budget feature of Angular CLI. This will warn developers if the application bundle size exceeds the predefined limit. The default value for the warning is set to 2MB, and for errors it is 5MB. This value is configurable and can be changed from the angular.json file. This feature enhances the application’s performance considerably.
  3. The Component Dev Kit (CDK) of Angular Material also receives some new features as part of this update. The two newly added feature of the CDK are:
  • Virtual Scrolling If you are trying to load a large list of elements, then it can affect the application’s performance. The <cdk-virtual-scroll-viewport> tag can be used to load only the visible part of the list on the screen. It will render only the items that can fit on the screen. When a user scrolls through the list then the DOM will load and unload the elements dynamically based on the display size. This feature is not to be confused with infinite scrolling which is altogether a different strategy to load elements. You can read more about Virtual Scrolling here.
  • Drag and Drop
    We can easily add the drag and drop feature to an item. It supports features such as free dragging of an element, reordering items of a list, moving items between list, animation, adding a custom drag handle, and restricted dragging along X or Y axis. You can read more about Drag and Drop here.

4. The mat-form-field will now support the use of the native select element. This will provide enhanced performance and usability to the application. Read more about this feature here.

5. Angular 7.0 has updated its dependencies to support Typescript 3.1, RxJS 6.3 and Node 10.

Now we will proceed to create our first Angular 7 application.

Prerequisites

  • Install the latest version of Node.js from here
  • Install Visual Studio Code from here

Installing Node.js will also install npm on your machine. After installing Node.js, open the command prompt. Run the following set of commands to check the version of node and npm installed on your machine.

  • node -v
  • npm -v

Refer to the image below:

![](https://cdn-media-1.freecodecamp.org/images/aMRrmSzH02XbSjMH7iLL9dvL2Rwr5XfDmZt2)

Installing Angular CLI

Angular CLI is the Command Line interface for Angular. It helps us to initialize, develop and maintain Angular applications easily.

To install Angular CLI, run the following command in the command window:

npm i -g @angular/cli

This will install Angular CLI 7.0 globally in your machine. Refer to the image below:

To check the version of angular CLI installed in your machine, run the following command:

Refer to the image below:

Create the Angular 7 app

Open Visual Studio Code and navigate to View >> Terminal. This will open the VS code terminal window. Alternatively, you can also use the keyboard shortcut ctrl+` to open the terminal window.

Type the following sequence of commands in the terminal window. These commands will create a directory named “ng7Demo”. Then create an Angular application with the name “ng7App” inside that directory.

  • mkdir ng7Demo
  • cd ng7Demo
  • ng new ng7App

As you run the ng new command, the Angular CLI will ask you to make selections in the following two options:

  1. Would you like to add Angular routing? (y/N)
  2. Which stylesheet format would you like to use?

Once you select the options and hit enter, the Angular 7.0 application will be created.

Refer to the below Gif for better understanding.

Once the application is created successfully, run the following command to open the project:

  • code .

Refer to the image below:

This will open the code file of our application in a new VS Code window. You can see the following file structure in Solution Explorer.

Open the package.json file and you can observe that we have the latest Angular 7.0.0 packages installed in our project.

{
  "name": "ng7-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.0.0",
    "@angular/common": "~7.0.0",
    "@angular/compiler": "~7.0.0",
    "@angular/core": "~7.0.0",
    "@angular/forms": "~7.0.0",
    "@angular/http": "~7.0.0",
    "@angular/platform-browser": "~7.0.0",
    "@angular/platform-browser-dynamic": "~7.0.0",
    "@angular/router": "~7.0.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular/cli": "~7.0.1",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.1"
  }
}

Execution Demo

The name of our Angular application is ng7App which is inside the ng7Demo directory.

So, we will first navigate to our application using the below commands.

  • cd ng7Demo
  • cd ng7App

Now, we use the following command to start the web server.

  • ng serve

Refer to the image below:

After running this command, you can see that it is asking to open _http://localhost:4200_ in your browser. So, open any browser on your machine and navigate to this URL. Now, you can see the following page.

How to upgrade to Angular 7

The angular team has provided an Angular Update Guide to ensure the smooth upgrade of angular versions. Navigate to https://update.angular.io/ to access it. It is a self-explanatory and easy to use application. It will show you the steps that you need to follow before updating, during the update and after the update. Refer to the image below:

If you want to update your application from Angular 6 to Angular 7 then run the following command in the project folder:

ng update @angular/cli @angular/core

Conclusion

We have learned about the new features of Angular 7.0. We also installed Angular CLI 7.0. To create and execute an Angular 7.0 app we have used Angular CLI and VS Code. We also explored the method to upgrade an existing application to Angular 7.0.

30s ad

Complete Angular 7 - Ultimate Guide - with Real World App

A Quick Guide to Angular 7 in 4 Hours

Go Full Stack with Spring Boot and Angular 7

JavaScript and Ruby on Rails with React, Angular, and Vue

Ionic 4 Angular- Build Web App, Native Android, IOS App

#angular #angular-js #javascript

What is GEEK

Buddha Community

What’s new in Angular 7. new Features and Updates
Jack Salvator

Jack Salvator

1608113009

New Angular 7 Features With Example - Info Stans

What is new in New Angular 7? New Angular 7 features have turned out as a powerful release that really brought advancement in the application development structure.

Here, we have listed new Angular 7 features with examples and write the difference between Angular 6 and Angular 7.

  • Bundle Budget
  • Virtual Scrolling
  • Error Handling
  • Documentation Updates
  • Application Performance
  • Native Script
  • CLI Prompts
  • Component in angular 7
  • Drag and Drop
  • Angular Do-Bootstrap

Read more: Angular 7 Features With Example

#angular 7 features #what’s new angular 7 #new angular 7 features #angular 7 features with examples

Clara  Gutmann

Clara Gutmann

1598727360

Angular 8 Updates And Summary of New Features

Angular 8 Updates And Summary of New Features is today’s topic. Angular 8 arrives with an impressive list of changes and improvements including the much-anticipated Ivy compiler as an opt-in feature. You can check out  Angular 7 features and updates if you have not seen yet. In this blog, we have written some articles about  Angular 7 Crud,  Angular 7 Routing,  Angular ngClass,  Angular ngFor.

Angular 8 Updates And Summary

See the following updates.

TypeScript 3.4

Angular 8.0 is now supported TypeScript 3.4, and even requires it, so you will need to upgrade.

You can look at what  TypeScript 3.3 and  TypeScript 3.4 brings on the table on official Microsoft blog.

#angular #typescript #angular 7 crud #angular 7 routing #angular 8

Christa  Stehr

Christa Stehr

1598940617

Install Angular - Angular Environment Setup Process

Angular is a TypeScript based framework that works in synchronization with HTML, CSS, and JavaScript. To work with angular, domain knowledge of these 3 is required.

  1. Installing Node.js and npm
  2. Installing Angular CLI
  3. Creating workspace
  4. Deploying your First App

In this article, you will get to know about the Angular Environment setup process. After reading this article, you will be able to install, setup, create, and launch your own application in Angular. So let’s start!!!

Angular environment setup

Install Angular in Easy Steps

For Installing Angular on your Machine, there are 2 prerequisites:

  • Node.js
  • npm Package Manager
Node.js

First you need to have Node.js installed as Angular require current, active LTS or maintenance LTS version of Node.js

Download and Install Node.js version suitable for your machine’s operating system.

Npm Package Manager

Angular, Angular CLI and Angular applications are dependent on npm packages. By installing Node.js, you have automatically installed the npm Package manager which will be the base for installing angular in your system. To check the presence of npm client and Angular version check of npm client, run this command:

  1. npm -v

Installing Angular CLI

  • Open Terminal/Command Prompt
  • To install Angular CLI, run the below command:
  1. npm install -g @angular/cli

installing angular CLI

· After executing the command, Angular CLI will get installed within some time. You can check it using the following command

  1. ng --version

Workspace Creation

Now as your Angular CLI is installed, you need to create a workspace to work upon your application. Methods for it are:

  • Using CLI
  • Using Visual Studio Code
1. Using CLI

To create a workspace:

  • Navigate to the desired directory where you want to create your workspace using cd command in the Terminal/Command prompt
  • Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:
  1. Ng new YourAppName

create angular workspace

  • After running this command, it will prompt you to select from various options about the CSS and other functionalities.

angular CSS options

  • To leave everything to default, simply press the Enter or the Return key.

angular setup

#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli

Avav Smith

Avav Smith

1560907901

What’s new in Angular 7. new Features and Updates

Introduction

Angular has released its latest version, Angular 7.0. In this article, we will explore the following points:

  • What is new in Angular 7.0
  • Creating your first Angular 7.0 application using Angular CLI
  • How to update your existing Angular application to Angular 7.0

What’s new in Angular 7.0?

  1. While creating a new Angular application, the Angular CLI will prompt the user to select if they want to add features like Angular routing or the format of the stylesheet they want to use in their application
  2. Angular 7.0 applications will use the Bundle Budget feature of Angular CLI. This will warn developers if the application bundle size exceeds the predefined limit. The default value for the warning is set to 2MB, and for errors it is 5MB. This value is configurable and can be changed from the angular.json file. This feature enhances the application’s performance considerably.
  3. The Component Dev Kit (CDK) of Angular Material also receives some new features as part of this update. The two newly added feature of the CDK are:
  • Virtual Scrolling If you are trying to load a large list of elements, then it can affect the application’s performance. The <cdk-virtual-scroll-viewport> tag can be used to load only the visible part of the list on the screen. It will render only the items that can fit on the screen. When a user scrolls through the list then the DOM will load and unload the elements dynamically based on the display size. This feature is not to be confused with infinite scrolling which is altogether a different strategy to load elements. You can read more about Virtual Scrolling here.
  • Drag and Drop
    We can easily add the drag and drop feature to an item. It supports features such as free dragging of an element, reordering items of a list, moving items between list, animation, adding a custom drag handle, and restricted dragging along X or Y axis. You can read more about Drag and Drop here.

4. The mat-form-field will now support the use of the native select element. This will provide enhanced performance and usability to the application. Read more about this feature here.

5. Angular 7.0 has updated its dependencies to support Typescript 3.1, RxJS 6.3 and Node 10.

Now we will proceed to create our first Angular 7 application.

Prerequisites

  • Install the latest version of Node.js from here
  • Install Visual Studio Code from here

Installing Node.js will also install npm on your machine. After installing Node.js, open the command prompt. Run the following set of commands to check the version of node and npm installed on your machine.

  • node -v
  • npm -v

Refer to the image below:

![](https://cdn-media-1.freecodecamp.org/images/aMRrmSzH02XbSjMH7iLL9dvL2Rwr5XfDmZt2)

Installing Angular CLI

Angular CLI is the Command Line interface for Angular. It helps us to initialize, develop and maintain Angular applications easily.

To install Angular CLI, run the following command in the command window:

npm i -g @angular/cli

This will install Angular CLI 7.0 globally in your machine. Refer to the image below:

To check the version of angular CLI installed in your machine, run the following command:

Refer to the image below:

Create the Angular 7 app

Open Visual Studio Code and navigate to View >> Terminal. This will open the VS code terminal window. Alternatively, you can also use the keyboard shortcut ctrl+` to open the terminal window.

Type the following sequence of commands in the terminal window. These commands will create a directory named “ng7Demo”. Then create an Angular application with the name “ng7App” inside that directory.

  • mkdir ng7Demo
  • cd ng7Demo
  • ng new ng7App

As you run the ng new command, the Angular CLI will ask you to make selections in the following two options:

  1. Would you like to add Angular routing? (y/N)
  2. Which stylesheet format would you like to use?

Once you select the options and hit enter, the Angular 7.0 application will be created.

Refer to the below Gif for better understanding.

Once the application is created successfully, run the following command to open the project:

  • code .

Refer to the image below:

This will open the code file of our application in a new VS Code window. You can see the following file structure in Solution Explorer.

Open the package.json file and you can observe that we have the latest Angular 7.0.0 packages installed in our project.

{
  "name": "ng7-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.0.0",
    "@angular/common": "~7.0.0",
    "@angular/compiler": "~7.0.0",
    "@angular/core": "~7.0.0",
    "@angular/forms": "~7.0.0",
    "@angular/http": "~7.0.0",
    "@angular/platform-browser": "~7.0.0",
    "@angular/platform-browser-dynamic": "~7.0.0",
    "@angular/router": "~7.0.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular/cli": "~7.0.1",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.1"
  }
}

Execution Demo

The name of our Angular application is ng7App which is inside the ng7Demo directory.

So, we will first navigate to our application using the below commands.

  • cd ng7Demo
  • cd ng7App

Now, we use the following command to start the web server.

  • ng serve

Refer to the image below:

After running this command, you can see that it is asking to open _http://localhost:4200_ in your browser. So, open any browser on your machine and navigate to this URL. Now, you can see the following page.

How to upgrade to Angular 7

The angular team has provided an Angular Update Guide to ensure the smooth upgrade of angular versions. Navigate to https://update.angular.io/ to access it. It is a self-explanatory and easy to use application. It will show you the steps that you need to follow before updating, during the update and after the update. Refer to the image below:

If you want to update your application from Angular 6 to Angular 7 then run the following command in the project folder:

ng update @angular/cli @angular/core

Conclusion

We have learned about the new features of Angular 7.0. We also installed Angular CLI 7.0. To create and execute an Angular 7.0 app we have used Angular CLI and VS Code. We also explored the method to upgrade an existing application to Angular 7.0.

30s ad

Complete Angular 7 - Ultimate Guide - with Real World App

A Quick Guide to Angular 7 in 4 Hours

Go Full Stack with Spring Boot and Angular 7

JavaScript and Ruby on Rails with React, Angular, and Vue

Ionic 4 Angular- Build Web App, Native Android, IOS App

#angular #angular-js #javascript

Clara  Gutmann

Clara Gutmann

1599486180

Angular 7 Features And Updates

Angular 7 Features And Updates is today’s leading topic. Yes, it is true that   Angular v7 is here and the wait is finally over, and we should be extra enthusiastic about this one since it’s a significant release that implements changes, new features, and improvements throughout the entire platform. It is released with  Angular Material 7 and  Angular CLI 7. Angular 7 is released with improved application performanceAngular Material 7 and CDK have new features like Virtual ScrollingDrag and DropCLI prompts the new feature in Angular CLI 7.

If you want to learn more about Angular, then check out this  Angular 7 – The complete Guide course.

Angular 7 Features And Updates

There are lots of new features in Angular 7, and we see all one by one.

#angular 7 #cli prompts #angular cli 7