Angular 7 - Tutorialspoint


Angular 7i

Angular 7About the TutorialAngular 7 is an open source JavaScript framework for building web applications and appsin JavaScript, html, and Typescript which is a superset of JavaScript. Angular providesbuilt-in features for animation, http service, and materials which in turn have featuressuch as auto-complete, navigation, toolbar, menus, etc. The code is written in Typescript,which compiles to JavaScript and displays the same in the browser.AudienceThis tutorial is designed for software programmers who want to learn the basics of Angular7 and its programming concepts in a simple and easy manner. This tutorial will give youenough understanding on the various functionalities of Angular 7 with suitable examples.PrerequisitesBefore proceeding with this tutorial, you should have a basic understanding of HTML, CSS,JavaScript, Typescript, and Document Object Model (DOM).Copyright & Disclaimer Copyright 2019 by Tutorials Point (I) Pvt. Ltd.All the content and graphics published in this e-book are the property of Tutorials Point (I)Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute or republishany contents or a part of contents of this e-book in any manner without written consentof the publisher.We strive to update the contents of our website and tutorials as timely and as precisely aspossible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt.Ltd. provides no guarantee regarding the accuracy, timeliness or completeness of ourwebsite or its contents including this tutorial. If you discover any errors on our website orin this tutorial, please notify us at contact@tutorialspoint.comii

Angular 7Table of ContentsAbout the Tutorial . iiAudience . iiPrerequisites . iiCopyright & Disclaimer . iiTable of Contents . iii1.Angular 7 – Overview . 1Angular Update to V7 . 1Angular CLI. 1Application Performance . 2Angular Material and CDK . 22.Angular 7 — Environment Setup . 3Nodejs. 33.Angular 7 — Project Setup . 6app . 174.Angular 7 — Components . 245.Angular 7 — Modules . 34Declaration . 356.Angular 7 — Data Binding . 377.Angular 7 — Event Binding . 448.Angular 7 — Templates . 509.Angular 7 — Directives . 56How to Create Custom Directives? . 5610. Angular 7 — Pipes . 60How to Create a Custom Pipe? . 6311. Angular 7 — Routing . 66Component Home . 67iii

Angular 712. Angular 7 — Services . 7413. Angular 7 — Http Client . 8214. Angular 7 — CLI Prompts . 8615. Angular 7 — Forms . 88Template Driven Form . 88Model Driven Form. 91Form Validation . 9416. Angular 7 — Materials/CDK-Virtual Scrolling . 100Why do we need Virtual Scrolling Module? . 10017. Angular 7 — Materials/CDK-Drag and Drop . 10718. Angular 7 — Animations . 11519. Angular 7 — Materials . 121Menu . 125SideNav . 126Datepicker . 12820. Angular 7 — Testing and Building Angular 7 Project . 132Testing Angular 7 Project . 132Buiding Angular 7 Project . 137iv

1. Angular 7 – OverviewAngular 7Angular 7 is owned by Google and the stable release was done on 18 th October 2018.This is the latest version of Angular.Below is the list of Angular versions released so far:VersionReleased DateAngular JSOctober 2010Angular 2.0Sept 2016Angular 4.0March 2017Angular 5.0November 2017Angular 6.0May 2018Angular 7.0October 2018The release dates for the next two major upcoming versions of Angular are given below:VersionReleased DateAngular 8.0March/April 2019Angular 9.0September/ October 2019Google plans to release the major Angular version every 6 months. The version releasedso far are backward compatible and can be updated to the newer one very easily.Let us discuss the new features added to Angular 7.Angular Update to V7Angular 7 is a major release wherein the angular core framework, Angular CLI, AngularMaterials are updated. In case you are using Angular 5 or 6 and want to update to Angular7, below is the command which will update your app to the recent version of Angular:ng update @angular/cli @angular/coreAngular CLIWhile doing project setup using angular CLI, it prompts you about the built-in featuresavailable, i.e., routing and stylesheet support as shown below:1

Angular 7Application PerformanceIn Angular 7, there is bundle budget added in angular.json as shown below:Budgets is a feature added to Angular CLI which allows you to set limit inside yourconfiguration to make sure your application size is within the limit set. You can set the sizeso that the app can be warned when the limit is crossed.Angular Material and CDKThe version of Angular Material/CDK is updated in Angular 7. Also there are 2 featuresadded to CDK: virtual scrolling, and drag and drop.Virtual ScrollingVirtual scrolling feature shows up the visible dom elements to the user, as the user scrolls,the next list is displayed. This gives faster experience as the full list is not loaded at onego and only loaded as per the visibility on the screen.Drag and DropYou can drag and drop elements from a list and place it wherever required within the list.The new feature is very smooth and fast.2

2. Angular 7 — Environment SetupAngular 7In this chapter, we will discuss the Environment Setup required for Angular 7. To installAngular 7, we require the following: Nodejs Npm Angular CLI IDE for writing your codeNodejsTo check if nodejs is installed on your system, type node -v in the terminal. This will helpyou see the version of nodejs currently installed on your system.Nodejs has to be greater than 8.x or 10.x, and npm has to be greater than 5.6 or 6.4.C:\ node –vv10.15.1If it does not print anything, install nodejs on your system. To install nodejs, go to thehomepage, of nodejs and install the package based onyour OS.The homepage of nodejs is as follows:3

Angular 7Based on your OS, install the required package. Once nodejs is installed, npm will also getinstalled along with it. To check if npm is installed or not, type npm –v in the terminal asgiven below. It will display the version of the npm.C:\ npm –v6.4.1Angular 7 installations are very simple with the help of angular CLI. Visit the homepage of angular to get the reference of the command.Type npm install –g @angular/cli in your command prompt, to install angular cli onyour system. It will take a while to install and once done you can check the version usingbelow command:ng versionIt will display version details of angular - cli as well version of others packages as shownbelow:4

Angular 7We are done with the installation of Angular 7. You can use any IDE of your choice, i.e.,WebStorm, Atom, Visual Studio Code to start working with Angular 7.The details of the project setup are explained in the next chapter.5

3. Angular 7 — Project SetupAngular 7In this chapter, we shall discuss about the Project Setup in Angular 7.To get started with the project setup, make sure you have nodejs installed. You cancheck the version of node in the command line using the command, node –v, asshown below:If you do not get the version, install nodejs from their official site: you have nodejs installed, npm will also get installed with it. To check npm version,run npm -v in command line as shown below:6

Angular 7So we have node version 10 and npm version 6.4.1.To install Angular 7, go to the site, to install Angular CLI.You will see the following commands on the webpage:npm install -g @angular/cli //command to install angular 7ng new my-dream-app // name of the projectcd my-dream-appng serve7

Angular 7The above commands help to get the project setup in Angular 7.We will create a folder called projectA7 and install angular/cli as shown below:Once the installation is done, check the details of the packages installed by using thecommand ng version as shown below:It gives the version for Angular CLI, typescript version and other packages available forAngular 7.We are done with the installation of Angular 7, now we will start with the project setup.To create a project in Angular 7, we will use the following command:ng new projectnameYou can use the projectname of your choice. Let us now run the above command in thecommand line.8

Angular 7Here, we use the projectname as angular7-app. Once you run the command it will ask youabout routing as shown below:Type y to add routing to your project setup.The next question is about t

Angular JS October 2010 Angular 2.0 Sept 2016 Angular 4.0 March 2017 Angular 5.0 November 2017 Angular 6.0 May 2018 Angular 7.0 October 2018 The release dates for the next two major upcoming versions of Angular are given below: Version Released Date Angular 8.0 March/April 2019 Angular 9.0 September/ October 2019 Google plans to release the major Angular version every 6 months. The