Angular 7 New Features
4.0 (1 rating)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
10 students enrolled

Angular 7 New Features

Get to grips with Angular 7's new and exciting features
4.0 (1 rating)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
10 students enrolled
Created by Packt Publishing
Last updated 12/2018
English [Auto]
Current price: $80.99 Original price: $124.99 Discount: 35% off
14 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 2 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Build an angular 7 app from scratch
  • Use Angular Material to add styles to your app
  • Upgrade an angular 6 app tp angular 7
  • Create a new Angular 7 project with the angular-cli
  • Install the new angular-cli globally on your machine
  • Update an existing Angular 6 project to version 7
Course content
Expand all 12 lectures 02:05:58
+ Angular 7 First Look
4 lectures 38:30

This is a course introduction and course outline.

Preview 02:56

Go through the process of upgrading an Angular 6 project to the new Angular 7.

   •  Upgrade Angular 6 to Angular 7 using a CLI command

   •  Analyze how Angular 6 was updated with Angular 7 installed

   •  Run an application to check whether it breaks or not

Upgrading an Angular 6 Project to Angular 7

Explore new features in Angular 7, including new Angular 7 CLI,  drag and drop, virtual scrolling, Angular Console, and performance.

   •  Learn in detail about Angular CLI Prompts

   •  Understand Angular Material CDK

   •  Explore Angular Console

What’s New in Angular 7

Compare and contrast an Angular 6 project with an upgraded Angular 7 project. See the major differences and similarities before and after the upgrade.

   •  Look at the differences between an Angular 6 project and an Angular 7 project

   •  Implement package.json for Angular 6 and Angular 7

   •  Analyze angular.json for Angular 6 and Angular 7

Comparing Side by Side an Angular 6 Project with Upgraded Angular 7
+ Creating Your First Angular 7 Project from Scratch
5 lectures 56:12

The New Angular 7 CLI command prompt has been added to the Schematics workflow with the capability to configure the schematics to suit developer needs.

   •  Create an Angular 7 Project

   •  Analyze the changes in the angular.json file

Preview 07:32

Experiment with Angular’s new Bundle Budgets feature to help you budget (manage) your project bundle sizes for production.

   •  Learn in detail about Budgets properties

Bundle Budgets

Explore TypeScript 3.1 support, including mappable tuple and array types, easier properties on function declarations, promises refactoring, and version redirects.

   •  Implement mappable.ts

   •  Implement function_properties.ts

2.3 Benefits of Typescript 3.1 Support

Explore Angular 7’s new life cycle hook ngDoBootStrap associated with a new interface called DoBootstrap.

   •  Implement app.module.ts

   •  Update index.html

The DoBootstrap Interface

The CanLoad interface only has a single Route object, which provides only very minimal information. This results in the inability to access the URL segment after the ?, &, or the parameter in a matrix notation (;).

   •  Explore UrlSegment, which has been added to the CanLoad interface for Angular 7

   •  Learn in detail about the CanLoad interface

The UrlSegment in the CanLoad Interface
+ More on Angular 7
3 lectures 31:16

Angular Drag and Drop is one of the latest new features added to the Angular 7 Material Design CDK, allowing developers to create draggable content on the fly.

   •  Learn in detail about the new feature of Drag and Drop introduced in Angular 7

   •  Understand this feature with the help of a practical demo

Angular Drag and Drop

Virtual scrolling does allow you to display an infinite list, but it will only display a small subset of records just enough to fill the viewport.

   •  Learn in detail about virtual scrolling

   •  Understand virtual scrolling with the help of a practical demo

How to Use Virtual Scrolling?

Look at other important features, including ngcc, KeyValuePipe, content projection via slots, router feature warning, the capability to recover from malformed URLs, mapping feature for ngfactory and ngsummary files, Angular CLI documentation, and Ivy rendering engine.

   •  Explore various features of Angular 7

Preview 03:56
  • A basic knowledge of TypeScript, JavaScript, and Angular 2+ version is desirable. There is no need to have read or researched Angular 7's new features before this course.

Angular is one of the most-used JavaScript frameworks in the World. It provides a complete solution for building single-page applications. There is a large community that contributes to improving the framework. It is really important to get the most out of each Angular version as every version comes with updates and improvements. Angular 7 offers improved application performance.

This course is quick, to the point, and informative. It covers each new feature that the framework has to offer to developers. You will also get to know what makes it different from Angular 6 and earlier versions of the framework. Then, you will learn to install the new Angular-CLI on your machine. Also, you will get the hang of other cool features such as virtual scrolling and drag and drop.

About the Author

Christian Hur is an IT/web instructor, author, developer, and indie filmmaker. He teaches web development and programming full-time at Gateway Technical College (Wisconsin) and part-time at the University of California, Irvine, Continuing Education Division (California). He is an author for Lynda/LinkedIn Learning (The DOM in JavaScript, jQuery, AngularJS, and React) and McPress (Developing Business Applications for the Web: With HTML, CSS, JSP, PHP, ASP .NET, and JavaScript).

Aside from his teaching career, Christian has more than 20 years' experience in web development and has built many websites and web-based applications using various Web technologies in the private sector. In the mid 1990's, he co-founded a multimedia and e-commerce company based in Los Angeles and Tokyo. In 2010, he co-founded a new private company to develop video games and produce indie films.

In his spare time, Christian enjoys exploring new web technologies, learning AR/VR development, and responding to questions on Quora and Stack Overflow.

Who this course is for:
  • This course is intended for web developers who are familiar with Angular and JavaScript for frontend development, and who want to get hands-on with the latest features of Angular.