SlideShare a Scribd company logo
What's New in Angular 4 | Angular 4 Features | Angular 4 Changes | Angular Tutorial | Edureka
EDUREKA ANGULAR CERTIFICATION TRAINING www.edureka.co/angular-js
Agenda
Angular Releases
1
Why not Angular 3 ?
2
It’s just Angular!!!
3
What’s new???
4
Demo
5
EDUREKA ANGULAR CERTIFICATION TRAINING www.edureka.co/angular-js
Angular 4
EDUREKA ANGULAR CERTIFICATION TRAINING www.edureka.co/angular-js
Angular 4 Coming into Picture …
• Changing from version 2 to version 4 … won’t be like changing from Angular 1
• It will simply be a change in some core libraries that demand a major SEMVER version change
• There will be proper deprecation phases to allow developers to adjust their code
X . Y . Z
Semantic Versioning
Major Change
Minor Change
Patch Update
Back in September, the Angular team also announced they will switch to Semantic Versioning (SEMVER)

Recommended for you

Angular, the New Angular JS
Angular, the New Angular JSAngular, the New Angular JS
Angular, the New Angular JS

Angular is a complete framework that combines declarative templates, dependency injection, end to end tooling, and integrated best practices in order to solve development challenges. Angular was completely rewritten from its predecessor AngularJS and allows developers to build their applications on web or mobile. Matthew Gardner explains how to setup a simple Angular app, diving into some of the concepts behind the framework and describe some of the key differences between Angular and AngularJS. Additionally, Matthew will showcase an Angular app which uses the Spotify API.

cloud computingsoftware developmentsoftware engineering
Developing a Demo Application with Angular 4 - J2I
Developing a Demo Application with Angular 4 - J2IDeveloping a Demo Application with Angular 4 - J2I
Developing a Demo Application with Angular 4 - J2I

Introduction to Angular Material, Angular Router and Angular Http with RxJS library. Fake REST API set up using json-server. Demo app source code available at: https://github.com/jeuneingenieurisamm/LangInstitute

angular 4angular materialangular router
Talk for DevFest 2021 - GDG Bénin
Talk for DevFest 2021 - GDG BéninTalk for DevFest 2021 - GDG Bénin
Talk for DevFest 2021 - GDG Bénin

This document discusses developing progressive web applications (PWAs) using Angular and Ionic frameworks. It provides an introduction to PWAs and their benefits, including being a single application that works offline. It outlines the key principles for developing PWAs, including using a manifest and service workers. It then discusses Angular as an application framework that can be used to build PWAs and its built-in features like routing and forms. Finally, it covers Ionic as a framework for building interfaces with native mobile app-like UX and access to device capabilities through its use of Capacitor.

angulartypescriptpwa
EDUREKA ANGULAR CERTIFICATION TRAINING www.edureka.co/angular-js
Tentative Release Schedule
The Angular team committed to time based releases that occur in three cycles:
• patch releases every week
• 3 monthly minor release after each major release
• a major release with easy-to-migrate-over breaking changes every 6 months
EDUREKA ANGULAR CERTIFICATION TRAINING www.edureka.co/angular-js
Why not Angular 3?
• Due to this misalignment of the router package’s version, the team decided to go straight for Angular v4
• In this way again, all the core packages are aligned which (easier to maintain and avoid confusion in future)
• The core Angular libraries are all versioned the same way except routes
Modules Version 2
Router Version 3
So… they decided to go with Angular 4
EDUREKA ANGULAR CERTIFICATION TRAINING www.edureka.co/angular-js
It’s Just Angular
Team announced that from now on, you should address Angular versions 2.0.0 or later as simply “Angular”… #ItIsJustAngular
Angular adopted Semantic Versioning and is backwards compatible with 2.x.x
Even upgrading TypeScript dependency from v1.8 to v2.1/v2.2 and compile Angular with it, would cause a breaking change
EDUREKA ANGULAR CERTIFICATION TRAINING www.edureka.co/angular-js
Angular 4: What’s New ? ? ?

Recommended for you

Angular 9 New features
Angular 9 New featuresAngular 9 New features
Angular 9 New features

This is an introduction to Angular with answers to common questions. We’ll see what Angular is, the various versions of Angular and the new features of version 9

angularwebfrontend
Go live with angular 4
Go live with angular 4Go live with angular 4
Go live with angular 4

This document provides an overview and comparison of Angular 2/4 and React frameworks. It discusses Angular and React's authors, languages, design approaches, templating, mobile support, MVC implementation, rendering, and other key features. Examples of using Angular CLI, building Angular components, component hierarchy, and deployment strategies are also included. The document compares Angular and React's pros and cons and provides the presenter's contact information.

softwareweb designframework
What is Angular version 4?
What is Angular version 4?What is Angular version 4?
What is Angular version 4?

Angular continues to be one of the most popular frameworks for building modern web applications. The impending release of Angular version 4 has many developers in a panic. What is Angular version 4? What happened to version 3? Do I have to learn a bunch of new stuff? Will my code break? Well, fear not Angular fans. We have answers and more. In this mini-session, we'll explain where we came from and where we are going. And more importantly, we have code samples. We will show you some of the latest cool stuff including the new *ngIf, animations, TypeScript 2.2 support, and the revised router. And prove to you most of the changes to Angular are pretty modest and shouldn't require much if any code changes.

angular materialgithubangular
EDUREKA ANGULAR CERTIFICATION TRAINING www.edureka.co/angular-js
Animation
*ngIf & *ngFor
Form Features
TypeScript
Compatibility
Source Maps
Packaging Changes
Functions
Smaller & Faster
www.edureka.co/angular-jsEDUREKA ANGULAR CERTIFICATION TRAINING
Smaller & Faster
View Engine
• Changes were done under the hood to what AOT generated code looks like
• Purpose is to reduce the size of the generated code for app components by averagely 60 percent
• During the candidate period release, many developers that migrated to 4, reduced their production
bundles by hundreds of kilobytes
Angular 2
Bundle
Angular 4
Bundle
100x
40x
Smaller & Faster
Animation
*ngIf & *ngFor
Form Features
www.edureka.co/angular-jsEDUREKA ANGULAR CERTIFICATION TRAINING
Animation
Animation Package
• Angular team has pulled animations out of @angular/core and into their own package
• Add animations to main NgModule by importing BrowserAnimationsModule from @angular/platform-
browser/animations
Animation Module
Importing Properties
Smaller & Faster
Animation
*ngIf & *ngFor
Form Features
www.edureka.co/angular-jsEDUREKA ANGULAR CERTIFICATION TRAINING
*ngIf & *ngFor
Enhanced *ngIf and *ngFor
The template binding syntax now supports a couple helpful changes:
• You can now use an if/else style syntax
• Assign local variables such as when unrolling an observable
Else Statement
Loading block
Smaller & Faster
Animation
*ngIf & *ngFor
Form Features

Recommended for you

Angular 4 Introduction Tutorial
Angular 4 Introduction TutorialAngular 4 Introduction Tutorial
Angular 4 Introduction Tutorial

This document outlines the steps to build a user management application using Angular 2. It begins with setting up the project structure using Angular CLI. Models, components, and services are generated to manage user data. The user list component is connected to the backend using a user manager service. Child components and routing are added to display user details. Forms and validation are implemented last. The overall process is broken into weekly steps and referenced blog posts provide more details on implementation.

angular2
Angular 2 Examples | Angular CRUD Application | Angular Tutorial | Angular Tr...
Angular 2 Examples | Angular CRUD Application | Angular Tutorial | Angular Tr...Angular 2 Examples | Angular CRUD Application | Angular Tutorial | Angular Tr...
Angular 2 Examples | Angular CRUD Application | Angular Tutorial | Angular Tr...

This Edureka "Angular 2 Example" tutorial will help you to learn about different Angular 2 components and how to implement them in building an angular 2 application. Angular 2 is a framework to develop highly scalable, fast, and testable web client-side applications. Below are the topics covered in this tutorial: 1) Angular 2 Introduction 2) Creating Angular 2 Applications i) Grocery List ii) Employee Management iii) Contact Manager Subscribe to our channel to get updates. Check our complete Angular playlist here: https://goo.gl/09KsDC

angular trainingangular edurekaangular examples
Introduction to angular 2
Introduction to angular 2Introduction to angular 2
Introduction to angular 2

With the progressive growing of Web Applications in the last few years, the new version of this super framework has some awesome new things. Change detection? Syntax sugar? ES6? Native APIs?

angular 2angular
www.edureka.co/angular-jsEDUREKA ANGULAR CERTIFICATION TRAINING
Form Features
Email type input
New features in Forms
Now you have email validator in forms to validate email instead of using pattern.Smaller & Faster
Animation
*ngIf & *ngFor
Form Features
www.edureka.co/angular-jsEDUREKA ANGULAR CERTIFICATION TRAINING
TypeScript Compatibility
TypeScript 2.1 and 2.2 compatibility:
• Angular has also been updated to a more recent version of TypeScript
• This improves the speed of ngc and users will get better type checking throughout your application
TypeScript
Compatibility
Source Maps
Packaging
Changes
Upgrade to
Angular 4
www.edureka.co/angular-jsEDUREKA ANGULAR CERTIFICATION TRAINING
Source Maps
l
Whenever an error occurs in one of templates, source maps are generated with
meaningful context in terms of the original template
Template
< >
Updated Template
< >
Changes
Errors
source maps are
generated with a
meaningful context
in terms of the
original template
TypeScript
Compatibility
Source Maps
Packaging
Changes
Upgrade to
Angular 4
www.edureka.co/angular-jsEDUREKA ANGULAR CERTIFICATION TRAINING
Packaging Changes
Packaging Changes
Flat ES Modules (Flat ESM / FESM)
• Angular now ship flattened versions of modules
• It helps in tree-shaking, reducing the size of your generated bundles, and speed up build,
transpilation and loading
Experimental ES2015 Builds
• Angular now also ship packages in the ES2015 Flat ESM format
• This option is experimental and opt-in.
• Developers have reported up to 7% bundle size savings when combining these packages with
Rollup
TypeScript
Compatibility
Source Maps
Packaging
Changes
Upgrade to
Angular 4

Recommended for you

Learn Angular 9/8 In Easy Steps
Learn Angular 9/8 In Easy Steps Learn Angular 9/8 In Easy Steps
Learn Angular 9/8 In Easy Steps

You'll learn to build an Angular 9/8 web application from scratch and deploy it to Firebase. Check https://ahmedbouchefra.com

javascripttypescriptangular
Dive into Angular, part 4: Angular 2.0
Dive into Angular, part 4: Angular 2.0Dive into Angular, part 4: Angular 2.0
Dive into Angular, part 4: Angular 2.0

This presentation has been prepared by Oleksii Prohonnyi for internal Angular.js training to improve skills of newbies in JS/Angular. Part 1 (Introduction): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-1-introduction Part 2 (Architecture): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-2-architecture Part 3 (Performance): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-3-performance Part 5 (Experience): https://www.slideshare.net/oprohonnyi/dive-into-angular-part-5-experience

buildingtemplatesjavascript
Quick introduction to Angular 4 for AngularJS 1.5 developers
Quick introduction to Angular 4 for AngularJS 1.5 developersQuick introduction to Angular 4 for AngularJS 1.5 developers
Quick introduction to Angular 4 for AngularJS 1.5 developers

Quick and dirty introduction to main concepts of Angular Web applications. These slides where accompanied by a workshop that took place in Decerto for fellow professionals.

typescriptangular clijavascript
www.edureka.co/angular-jsEDUREKA ANGULAR CERTIFICATION TRAINING
Upgrade to Angular 4
Ready to upgrade 4.0.0
• Updating to 4 is easy
• This will work for most use cases
TypeScript
Compatibility
Source Maps
Packaging Changes
Upgrade to
Angular 4
www.edureka.co/angular-jsEDUREKA ANGULAR CERTIFICATION TRAINING
Creating Angular 4 Application
Create an app in v4!
Use ng new command along with --ng4 option to create a new app
EDUREKA ANGULAR CERTIFICATION TRAINING www.edureka.co/angular-js
Upgrading Angular Application
EDUREKA ANGULAR CERTIFICATION TRAINING www.edureka.co/angular-js
Thank You …
Questions/Queries/Feedback

Recommended for you

What angular 13 will bring to the table
What angular 13 will bring to the table What angular 13 will bring to the table
What angular 13 will bring to the table

Angular 13 is a pre-planned upgrade to the most recognized and widely-used typescript-style web framework called Angular. Google, the owner of this framework, has already created and released eight beta versions as of 24th September.

angularangular 13technology
Meetup SkillValue - Angular 6 : Bien démarrer son application
Meetup SkillValue - Angular 6 : Bien démarrer son applicationMeetup SkillValue - Angular 6 : Bien démarrer son application
Meetup SkillValue - Angular 6 : Bien démarrer son application

Angular 6 architecture organizes code into modules, components, services and more. The document discusses Angular CLI commands, project structure, and key concepts like lazy loading modules. It also covers RxJS updates and best practices like separating app code into core, shared and feature modules that can be loaded independently. Overall the document provides an overview of Angular 6 project organization and architecture.

angularfile structure
Angular2 - getting-ready
Angular2 - getting-ready Angular2 - getting-ready
Angular2 - getting-ready

Presentation made for the NG-CONF Israel 2015 (http://ng-conf.co.il/) Angular2 is just around the corner.. so, how can we prepare our angular 1.x code base to the migration? An example project that come along with those slides available on Github (links inside)

angularecmascript6angular2

More Related Content

What's hot

What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
Edureka!
 
Angular 6 - The Complete Guide
Angular 6 - The Complete GuideAngular 6 - The Complete Guide
Angular 6 - The Complete Guide
Sam Dias
 
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
Edureka!
 
Angular, the New Angular JS
Angular, the New Angular JSAngular, the New Angular JS
Angular, the New Angular JS
Kenzan
 
Developing a Demo Application with Angular 4 - J2I
Developing a Demo Application with Angular 4 - J2IDeveloping a Demo Application with Angular 4 - J2I
Developing a Demo Application with Angular 4 - J2I
Nader Debbabi
 
Talk for DevFest 2021 - GDG Bénin
Talk for DevFest 2021 - GDG BéninTalk for DevFest 2021 - GDG Bénin
Talk for DevFest 2021 - GDG Bénin
Ezéchiel Amen AGBLA
 
Angular 9 New features
Angular 9 New featuresAngular 9 New features
Angular 9 New features
Ahmed Bouchefra
 
Go live with angular 4
Go live with angular 4Go live with angular 4
Go live with angular 4
Indra Gunawan
 
What is Angular version 4?
What is Angular version 4?What is Angular version 4?
What is Angular version 4?
Troy Miles
 
Angular 4 Introduction Tutorial
Angular 4 Introduction TutorialAngular 4 Introduction Tutorial
Angular 4 Introduction Tutorial
Scott Lee
 
Angular 2 Examples | Angular CRUD Application | Angular Tutorial | Angular Tr...
Angular 2 Examples | Angular CRUD Application | Angular Tutorial | Angular Tr...Angular 2 Examples | Angular CRUD Application | Angular Tutorial | Angular Tr...
Angular 2 Examples | Angular CRUD Application | Angular Tutorial | Angular Tr...
Edureka!
 
Introduction to angular 2
Introduction to angular 2Introduction to angular 2
Introduction to angular 2
Dhyego Fernando
 
Learn Angular 9/8 In Easy Steps
Learn Angular 9/8 In Easy Steps Learn Angular 9/8 In Easy Steps
Learn Angular 9/8 In Easy Steps
Ahmed Bouchefra
 
Dive into Angular, part 4: Angular 2.0
Dive into Angular, part 4: Angular 2.0Dive into Angular, part 4: Angular 2.0
Dive into Angular, part 4: Angular 2.0
Oleksii Prohonnyi
 
Quick introduction to Angular 4 for AngularJS 1.5 developers
Quick introduction to Angular 4 for AngularJS 1.5 developersQuick introduction to Angular 4 for AngularJS 1.5 developers
Quick introduction to Angular 4 for AngularJS 1.5 developers
Paweł Żurowski
 
What angular 13 will bring to the table
What angular 13 will bring to the table What angular 13 will bring to the table
What angular 13 will bring to the table
Moon Technolabs Pvt. Ltd.
 
Meetup SkillValue - Angular 6 : Bien démarrer son application
Meetup SkillValue - Angular 6 : Bien démarrer son applicationMeetup SkillValue - Angular 6 : Bien démarrer son application
Meetup SkillValue - Angular 6 : Bien démarrer son application
Thibault Even
 
Angular2 - getting-ready
Angular2 - getting-ready Angular2 - getting-ready
Angular2 - getting-ready
Nir Kaufman
 
Angular 2 - Core Concepts
Angular 2 - Core ConceptsAngular 2 - Core Concepts
Angular 2 - Core Concepts
Fabio Biondi
 
Angular 9
Angular 9 Angular 9
Angular 9
Raja Vishnu
 

What's hot (20)

What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
 
Angular 6 - The Complete Guide
Angular 6 - The Complete GuideAngular 6 - The Complete Guide
Angular 6 - The Complete Guide
 
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
 
Angular, the New Angular JS
Angular, the New Angular JSAngular, the New Angular JS
Angular, the New Angular JS
 
Developing a Demo Application with Angular 4 - J2I
Developing a Demo Application with Angular 4 - J2IDeveloping a Demo Application with Angular 4 - J2I
Developing a Demo Application with Angular 4 - J2I
 
Talk for DevFest 2021 - GDG Bénin
Talk for DevFest 2021 - GDG BéninTalk for DevFest 2021 - GDG Bénin
Talk for DevFest 2021 - GDG Bénin
 
Angular 9 New features
Angular 9 New featuresAngular 9 New features
Angular 9 New features
 
Go live with angular 4
Go live with angular 4Go live with angular 4
Go live with angular 4
 
What is Angular version 4?
What is Angular version 4?What is Angular version 4?
What is Angular version 4?
 
Angular 4 Introduction Tutorial
Angular 4 Introduction TutorialAngular 4 Introduction Tutorial
Angular 4 Introduction Tutorial
 
Angular 2 Examples | Angular CRUD Application | Angular Tutorial | Angular Tr...
Angular 2 Examples | Angular CRUD Application | Angular Tutorial | Angular Tr...Angular 2 Examples | Angular CRUD Application | Angular Tutorial | Angular Tr...
Angular 2 Examples | Angular CRUD Application | Angular Tutorial | Angular Tr...
 
Introduction to angular 2
Introduction to angular 2Introduction to angular 2
Introduction to angular 2
 
Learn Angular 9/8 In Easy Steps
Learn Angular 9/8 In Easy Steps Learn Angular 9/8 In Easy Steps
Learn Angular 9/8 In Easy Steps
 
Dive into Angular, part 4: Angular 2.0
Dive into Angular, part 4: Angular 2.0Dive into Angular, part 4: Angular 2.0
Dive into Angular, part 4: Angular 2.0
 
Quick introduction to Angular 4 for AngularJS 1.5 developers
Quick introduction to Angular 4 for AngularJS 1.5 developersQuick introduction to Angular 4 for AngularJS 1.5 developers
Quick introduction to Angular 4 for AngularJS 1.5 developers
 
What angular 13 will bring to the table
What angular 13 will bring to the table What angular 13 will bring to the table
What angular 13 will bring to the table
 
Meetup SkillValue - Angular 6 : Bien démarrer son application
Meetup SkillValue - Angular 6 : Bien démarrer son applicationMeetup SkillValue - Angular 6 : Bien démarrer son application
Meetup SkillValue - Angular 6 : Bien démarrer son application
 
Angular2 - getting-ready
Angular2 - getting-ready Angular2 - getting-ready
Angular2 - getting-ready
 
Angular 2 - Core Concepts
Angular 2 - Core ConceptsAngular 2 - Core Concepts
Angular 2 - Core Concepts
 
Angular 9
Angular 9 Angular 9
Angular 9
 

Similar to What's New in Angular 4 | Angular 4 Features | Angular 4 Changes | Angular Tutorial | Edureka

Evolution and History of Angular as Web Development Platform.pdf
Evolution and History of Angular as Web Development Platform.pdfEvolution and History of Angular as Web Development Platform.pdf
Evolution and History of Angular as Web Development Platform.pdf
iFour Technolab Pvt. Ltd.
 
Top Features Of Angular 13 You Must Know
Top Features Of Angular 13 You Must KnowTop Features Of Angular 13 You Must Know
Top Features Of Angular 13 You Must Know
simonedaniels3
 
Angular2.0@Shanghai0319
Angular2.0@Shanghai0319Angular2.0@Shanghai0319
Angular2.0@Shanghai0319
Bibby Chung
 
Angular 2 - How we got here?
Angular 2 - How we got here?Angular 2 - How we got here?
Angular 2 - How we got here?
Marios Fakiolas
 
Angular 12 brought several new features to the table
Angular 12 brought several new features to the tableAngular 12 brought several new features to the table
Angular 12 brought several new features to the table
Moon Technolabs Pvt. Ltd.
 
THE FUTURE OF ANGULAR JS
THE FUTURE OF ANGULAR JSTHE FUTURE OF ANGULAR JS
THE FUTURE OF ANGULAR JS
IT Outsourcing China
 
Brief introduction to Angular 2.0 & 4.0
Brief introduction to Angular 2.0 & 4.0Brief introduction to Angular 2.0 & 4.0
Brief introduction to Angular 2.0 & 4.0
Nisheed Jagadish
 
Popularity career growth and salary of angular covered in an angular certifi...
Popularity career growth and salary  of angular covered in an angular certifi...Popularity career growth and salary  of angular covered in an angular certifi...
Popularity career growth and salary of angular covered in an angular certifi...
FelixAnderson11
 
Angular 2.0
Angular  2.0Angular  2.0
Angular 2.0
Mallikarjuna G D
 
What is Angular Ivy?
What is Angular Ivy?What is Angular Ivy?
What is Angular Ivy?
Albiorix Technology
 
5 Key Benefits of Migration
5 Key Benefits of Migration5 Key Benefits of Migration
5 Key Benefits of Migration
Happiest Minds Technologies
 
Top Features And Updates Of Angular 13 You Must Know
Top Features And Updates Of Angular 13 You Must KnowTop Features And Updates Of Angular 13 You Must Know
Top Features And Updates Of Angular 13 You Must Know
Andolasoft Inc
 
Angular vs react
Angular vs reactAngular vs react
Angular vs react
Infinijith Technologies
 
PPT on Angular 2 Development Tutorial
PPT on Angular 2 Development TutorialPPT on Angular 2 Development Tutorial
PPT on Angular 2 Development Tutorial
Paddy Lock
 
Angularjs Development Company USA
Angularjs Development Company USA Angularjs Development Company USA
Angularjs Development Company USA
Shelly Megan
 
Angular JS 2_0 BCS CTO_in_Res V3
Angular JS 2_0 BCS CTO_in_Res V3Angular JS 2_0 BCS CTO_in_Res V3
Angular JS 2_0 BCS CTO_in_Res V3
Bruce Pentreath
 
Introduction to angular 2
Introduction to angular 2Introduction to angular 2
Introduction to angular 2
Dor Moshe
 
Getting to Angular 2
Getting to Angular 2Getting to Angular 2
Getting to Angular 2
Jennifer Bourey
 
Angular11 exciting new features and updates
Angular11 exciting new features and updatesAngular11 exciting new features and updates
Angular11 exciting new features and updates
Shelly Megan
 
Angular 11 – everything you need to know
Angular 11 – everything you need to knowAngular 11 – everything you need to know
Angular 11 – everything you need to know
WebGuru Infosystems Pvt. Ltd.
 

Similar to What's New in Angular 4 | Angular 4 Features | Angular 4 Changes | Angular Tutorial | Edureka (20)

Evolution and History of Angular as Web Development Platform.pdf
Evolution and History of Angular as Web Development Platform.pdfEvolution and History of Angular as Web Development Platform.pdf
Evolution and History of Angular as Web Development Platform.pdf
 
Top Features Of Angular 13 You Must Know
Top Features Of Angular 13 You Must KnowTop Features Of Angular 13 You Must Know
Top Features Of Angular 13 You Must Know
 
Angular2.0@Shanghai0319
Angular2.0@Shanghai0319Angular2.0@Shanghai0319
Angular2.0@Shanghai0319
 
Angular 2 - How we got here?
Angular 2 - How we got here?Angular 2 - How we got here?
Angular 2 - How we got here?
 
Angular 12 brought several new features to the table
Angular 12 brought several new features to the tableAngular 12 brought several new features to the table
Angular 12 brought several new features to the table
 
THE FUTURE OF ANGULAR JS
THE FUTURE OF ANGULAR JSTHE FUTURE OF ANGULAR JS
THE FUTURE OF ANGULAR JS
 
Brief introduction to Angular 2.0 & 4.0
Brief introduction to Angular 2.0 & 4.0Brief introduction to Angular 2.0 & 4.0
Brief introduction to Angular 2.0 & 4.0
 
Popularity career growth and salary of angular covered in an angular certifi...
Popularity career growth and salary  of angular covered in an angular certifi...Popularity career growth and salary  of angular covered in an angular certifi...
Popularity career growth and salary of angular covered in an angular certifi...
 
Angular 2.0
Angular  2.0Angular  2.0
Angular 2.0
 
What is Angular Ivy?
What is Angular Ivy?What is Angular Ivy?
What is Angular Ivy?
 
5 Key Benefits of Migration
5 Key Benefits of Migration5 Key Benefits of Migration
5 Key Benefits of Migration
 
Top Features And Updates Of Angular 13 You Must Know
Top Features And Updates Of Angular 13 You Must KnowTop Features And Updates Of Angular 13 You Must Know
Top Features And Updates Of Angular 13 You Must Know
 
Angular vs react
Angular vs reactAngular vs react
Angular vs react
 
PPT on Angular 2 Development Tutorial
PPT on Angular 2 Development TutorialPPT on Angular 2 Development Tutorial
PPT on Angular 2 Development Tutorial
 
Angularjs Development Company USA
Angularjs Development Company USA Angularjs Development Company USA
Angularjs Development Company USA
 
Angular JS 2_0 BCS CTO_in_Res V3
Angular JS 2_0 BCS CTO_in_Res V3Angular JS 2_0 BCS CTO_in_Res V3
Angular JS 2_0 BCS CTO_in_Res V3
 
Introduction to angular 2
Introduction to angular 2Introduction to angular 2
Introduction to angular 2
 
Getting to Angular 2
Getting to Angular 2Getting to Angular 2
Getting to Angular 2
 
Angular11 exciting new features and updates
Angular11 exciting new features and updatesAngular11 exciting new features and updates
Angular11 exciting new features and updates
 
Angular 11 – everything you need to know
Angular 11 – everything you need to knowAngular 11 – everything you need to know
Angular 11 – everything you need to know
 

More from Edureka!

What to learn during the 21 days Lockdown | Edureka
What to learn during the 21 days Lockdown | EdurekaWhat to learn during the 21 days Lockdown | Edureka
What to learn during the 21 days Lockdown | Edureka
Edureka!
 
Top 10 Dying Programming Languages in 2020 | Edureka
Top 10 Dying Programming Languages in 2020 | EdurekaTop 10 Dying Programming Languages in 2020 | Edureka
Top 10 Dying Programming Languages in 2020 | Edureka
Edureka!
 
Top 5 Trending Business Intelligence Tools | Edureka
Top 5 Trending Business Intelligence Tools | EdurekaTop 5 Trending Business Intelligence Tools | Edureka
Top 5 Trending Business Intelligence Tools | Edureka
Edureka!
 
Tableau Tutorial for Data Science | Edureka
Tableau Tutorial for Data Science | EdurekaTableau Tutorial for Data Science | Edureka
Tableau Tutorial for Data Science | Edureka
Edureka!
 
Python Programming Tutorial | Edureka
Python Programming Tutorial | EdurekaPython Programming Tutorial | Edureka
Python Programming Tutorial | Edureka
Edureka!
 
Top 5 PMP Certifications | Edureka
Top 5 PMP Certifications | EdurekaTop 5 PMP Certifications | Edureka
Top 5 PMP Certifications | Edureka
Edureka!
 
Top Maven Interview Questions in 2020 | Edureka
Top Maven Interview Questions in 2020 | EdurekaTop Maven Interview Questions in 2020 | Edureka
Top Maven Interview Questions in 2020 | Edureka
Edureka!
 
Linux Mint Tutorial | Edureka
Linux Mint Tutorial | EdurekaLinux Mint Tutorial | Edureka
Linux Mint Tutorial | Edureka
Edureka!
 
How to Deploy Java Web App in AWS| Edureka
How to Deploy Java Web App in AWS| EdurekaHow to Deploy Java Web App in AWS| Edureka
How to Deploy Java Web App in AWS| Edureka
Edureka!
 
Importance of Digital Marketing | Edureka
Importance of Digital Marketing | EdurekaImportance of Digital Marketing | Edureka
Importance of Digital Marketing | Edureka
Edureka!
 
RPA in 2020 | Edureka
RPA in 2020 | EdurekaRPA in 2020 | Edureka
RPA in 2020 | Edureka
Edureka!
 
Email Notifications in Jenkins | Edureka
Email Notifications in Jenkins | EdurekaEmail Notifications in Jenkins | Edureka
Email Notifications in Jenkins | Edureka
Edureka!
 
EA Algorithm in Machine Learning | Edureka
EA Algorithm in Machine Learning | EdurekaEA Algorithm in Machine Learning | Edureka
EA Algorithm in Machine Learning | Edureka
Edureka!
 
Cognitive AI Tutorial | Edureka
Cognitive AI Tutorial | EdurekaCognitive AI Tutorial | Edureka
Cognitive AI Tutorial | Edureka
Edureka!
 
AWS Cloud Practitioner Tutorial | Edureka
AWS Cloud Practitioner Tutorial | EdurekaAWS Cloud Practitioner Tutorial | Edureka
AWS Cloud Practitioner Tutorial | Edureka
Edureka!
 
Blue Prism Top Interview Questions | Edureka
Blue Prism Top Interview Questions | EdurekaBlue Prism Top Interview Questions | Edureka
Blue Prism Top Interview Questions | Edureka
Edureka!
 
Big Data on AWS Tutorial | Edureka
Big Data on AWS Tutorial | Edureka Big Data on AWS Tutorial | Edureka
Big Data on AWS Tutorial | Edureka
Edureka!
 
A star algorithm | A* Algorithm in Artificial Intelligence | Edureka
A star algorithm | A* Algorithm in Artificial Intelligence | EdurekaA star algorithm | A* Algorithm in Artificial Intelligence | Edureka
A star algorithm | A* Algorithm in Artificial Intelligence | Edureka
Edureka!
 
Kubernetes Installation on Ubuntu | Edureka
Kubernetes Installation on Ubuntu | EdurekaKubernetes Installation on Ubuntu | Edureka
Kubernetes Installation on Ubuntu | Edureka
Edureka!
 
Introduction to DevOps | Edureka
Introduction to DevOps | EdurekaIntroduction to DevOps | Edureka
Introduction to DevOps | Edureka
Edureka!
 

More from Edureka! (20)

What to learn during the 21 days Lockdown | Edureka
What to learn during the 21 days Lockdown | EdurekaWhat to learn during the 21 days Lockdown | Edureka
What to learn during the 21 days Lockdown | Edureka
 
Top 10 Dying Programming Languages in 2020 | Edureka
Top 10 Dying Programming Languages in 2020 | EdurekaTop 10 Dying Programming Languages in 2020 | Edureka
Top 10 Dying Programming Languages in 2020 | Edureka
 
Top 5 Trending Business Intelligence Tools | Edureka
Top 5 Trending Business Intelligence Tools | EdurekaTop 5 Trending Business Intelligence Tools | Edureka
Top 5 Trending Business Intelligence Tools | Edureka
 
Tableau Tutorial for Data Science | Edureka
Tableau Tutorial for Data Science | EdurekaTableau Tutorial for Data Science | Edureka
Tableau Tutorial for Data Science | Edureka
 
Python Programming Tutorial | Edureka
Python Programming Tutorial | EdurekaPython Programming Tutorial | Edureka
Python Programming Tutorial | Edureka
 
Top 5 PMP Certifications | Edureka
Top 5 PMP Certifications | EdurekaTop 5 PMP Certifications | Edureka
Top 5 PMP Certifications | Edureka
 
Top Maven Interview Questions in 2020 | Edureka
Top Maven Interview Questions in 2020 | EdurekaTop Maven Interview Questions in 2020 | Edureka
Top Maven Interview Questions in 2020 | Edureka
 
Linux Mint Tutorial | Edureka
Linux Mint Tutorial | EdurekaLinux Mint Tutorial | Edureka
Linux Mint Tutorial | Edureka
 
How to Deploy Java Web App in AWS| Edureka
How to Deploy Java Web App in AWS| EdurekaHow to Deploy Java Web App in AWS| Edureka
How to Deploy Java Web App in AWS| Edureka
 
Importance of Digital Marketing | Edureka
Importance of Digital Marketing | EdurekaImportance of Digital Marketing | Edureka
Importance of Digital Marketing | Edureka
 
RPA in 2020 | Edureka
RPA in 2020 | EdurekaRPA in 2020 | Edureka
RPA in 2020 | Edureka
 
Email Notifications in Jenkins | Edureka
Email Notifications in Jenkins | EdurekaEmail Notifications in Jenkins | Edureka
Email Notifications in Jenkins | Edureka
 
EA Algorithm in Machine Learning | Edureka
EA Algorithm in Machine Learning | EdurekaEA Algorithm in Machine Learning | Edureka
EA Algorithm in Machine Learning | Edureka
 
Cognitive AI Tutorial | Edureka
Cognitive AI Tutorial | EdurekaCognitive AI Tutorial | Edureka
Cognitive AI Tutorial | Edureka
 
AWS Cloud Practitioner Tutorial | Edureka
AWS Cloud Practitioner Tutorial | EdurekaAWS Cloud Practitioner Tutorial | Edureka
AWS Cloud Practitioner Tutorial | Edureka
 
Blue Prism Top Interview Questions | Edureka
Blue Prism Top Interview Questions | EdurekaBlue Prism Top Interview Questions | Edureka
Blue Prism Top Interview Questions | Edureka
 
Big Data on AWS Tutorial | Edureka
Big Data on AWS Tutorial | Edureka Big Data on AWS Tutorial | Edureka
Big Data on AWS Tutorial | Edureka
 
A star algorithm | A* Algorithm in Artificial Intelligence | Edureka
A star algorithm | A* Algorithm in Artificial Intelligence | EdurekaA star algorithm | A* Algorithm in Artificial Intelligence | Edureka
A star algorithm | A* Algorithm in Artificial Intelligence | Edureka
 
Kubernetes Installation on Ubuntu | Edureka
Kubernetes Installation on Ubuntu | EdurekaKubernetes Installation on Ubuntu | Edureka
Kubernetes Installation on Ubuntu | Edureka
 
Introduction to DevOps | Edureka
Introduction to DevOps | EdurekaIntroduction to DevOps | Edureka
Introduction to DevOps | Edureka
 

Recently uploaded

Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
Bert Blevins
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
jackson110191
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
welrejdoall
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
Matthew Sinclair
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
ScyllaDB
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
ishalveerrandhawa1
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
shanthidl1
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
BookNet Canada
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 

Recently uploaded (20)

Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 

What's New in Angular 4 | Angular 4 Features | Angular 4 Changes | Angular Tutorial | Edureka

  • 2. EDUREKA ANGULAR CERTIFICATION TRAINING www.edureka.co/angular-js Agenda Angular Releases 1 Why not Angular 3 ? 2 It’s just Angular!!! 3 What’s new??? 4 Demo 5
  • 3. EDUREKA ANGULAR CERTIFICATION TRAINING www.edureka.co/angular-js Angular 4
  • 4. EDUREKA ANGULAR CERTIFICATION TRAINING www.edureka.co/angular-js Angular 4 Coming into Picture … • Changing from version 2 to version 4 … won’t be like changing from Angular 1 • It will simply be a change in some core libraries that demand a major SEMVER version change • There will be proper deprecation phases to allow developers to adjust their code X . Y . Z Semantic Versioning Major Change Minor Change Patch Update Back in September, the Angular team also announced they will switch to Semantic Versioning (SEMVER)
  • 5. EDUREKA ANGULAR CERTIFICATION TRAINING www.edureka.co/angular-js Tentative Release Schedule The Angular team committed to time based releases that occur in three cycles: • patch releases every week • 3 monthly minor release after each major release • a major release with easy-to-migrate-over breaking changes every 6 months
  • 6. EDUREKA ANGULAR CERTIFICATION TRAINING www.edureka.co/angular-js Why not Angular 3? • Due to this misalignment of the router package’s version, the team decided to go straight for Angular v4 • In this way again, all the core packages are aligned which (easier to maintain and avoid confusion in future) • The core Angular libraries are all versioned the same way except routes Modules Version 2 Router Version 3 So… they decided to go with Angular 4
  • 7. EDUREKA ANGULAR CERTIFICATION TRAINING www.edureka.co/angular-js It’s Just Angular Team announced that from now on, you should address Angular versions 2.0.0 or later as simply “Angular”… #ItIsJustAngular Angular adopted Semantic Versioning and is backwards compatible with 2.x.x Even upgrading TypeScript dependency from v1.8 to v2.1/v2.2 and compile Angular with it, would cause a breaking change
  • 8. EDUREKA ANGULAR CERTIFICATION TRAINING www.edureka.co/angular-js Angular 4: What’s New ? ? ?
  • 9. EDUREKA ANGULAR CERTIFICATION TRAINING www.edureka.co/angular-js Animation *ngIf & *ngFor Form Features TypeScript Compatibility Source Maps Packaging Changes Functions Smaller & Faster
  • 10. www.edureka.co/angular-jsEDUREKA ANGULAR CERTIFICATION TRAINING Smaller & Faster View Engine • Changes were done under the hood to what AOT generated code looks like • Purpose is to reduce the size of the generated code for app components by averagely 60 percent • During the candidate period release, many developers that migrated to 4, reduced their production bundles by hundreds of kilobytes Angular 2 Bundle Angular 4 Bundle 100x 40x Smaller & Faster Animation *ngIf & *ngFor Form Features
  • 11. www.edureka.co/angular-jsEDUREKA ANGULAR CERTIFICATION TRAINING Animation Animation Package • Angular team has pulled animations out of @angular/core and into their own package • Add animations to main NgModule by importing BrowserAnimationsModule from @angular/platform- browser/animations Animation Module Importing Properties Smaller & Faster Animation *ngIf & *ngFor Form Features
  • 12. www.edureka.co/angular-jsEDUREKA ANGULAR CERTIFICATION TRAINING *ngIf & *ngFor Enhanced *ngIf and *ngFor The template binding syntax now supports a couple helpful changes: • You can now use an if/else style syntax • Assign local variables such as when unrolling an observable Else Statement Loading block Smaller & Faster Animation *ngIf & *ngFor Form Features
  • 13. www.edureka.co/angular-jsEDUREKA ANGULAR CERTIFICATION TRAINING Form Features Email type input New features in Forms Now you have email validator in forms to validate email instead of using pattern.Smaller & Faster Animation *ngIf & *ngFor Form Features
  • 14. www.edureka.co/angular-jsEDUREKA ANGULAR CERTIFICATION TRAINING TypeScript Compatibility TypeScript 2.1 and 2.2 compatibility: • Angular has also been updated to a more recent version of TypeScript • This improves the speed of ngc and users will get better type checking throughout your application TypeScript Compatibility Source Maps Packaging Changes Upgrade to Angular 4
  • 15. www.edureka.co/angular-jsEDUREKA ANGULAR CERTIFICATION TRAINING Source Maps l Whenever an error occurs in one of templates, source maps are generated with meaningful context in terms of the original template Template < > Updated Template < > Changes Errors source maps are generated with a meaningful context in terms of the original template TypeScript Compatibility Source Maps Packaging Changes Upgrade to Angular 4
  • 16. www.edureka.co/angular-jsEDUREKA ANGULAR CERTIFICATION TRAINING Packaging Changes Packaging Changes Flat ES Modules (Flat ESM / FESM) • Angular now ship flattened versions of modules • It helps in tree-shaking, reducing the size of your generated bundles, and speed up build, transpilation and loading Experimental ES2015 Builds • Angular now also ship packages in the ES2015 Flat ESM format • This option is experimental and opt-in. • Developers have reported up to 7% bundle size savings when combining these packages with Rollup TypeScript Compatibility Source Maps Packaging Changes Upgrade to Angular 4
  • 17. www.edureka.co/angular-jsEDUREKA ANGULAR CERTIFICATION TRAINING Upgrade to Angular 4 Ready to upgrade 4.0.0 • Updating to 4 is easy • This will work for most use cases TypeScript Compatibility Source Maps Packaging Changes Upgrade to Angular 4
  • 18. www.edureka.co/angular-jsEDUREKA ANGULAR CERTIFICATION TRAINING Creating Angular 4 Application Create an app in v4! Use ng new command along with --ng4 option to create a new app
  • 19. EDUREKA ANGULAR CERTIFICATION TRAINING www.edureka.co/angular-js Upgrading Angular Application
  • 20. EDUREKA ANGULAR CERTIFICATION TRAINING www.edureka.co/angular-js Thank You … Questions/Queries/Feedback