Angular 7 - Tutorialspoint

1 Angular 7 i Angular 7 ii About the Tutorial Angular 7 is an open source JavaScript framework for building web applications and apps in JavaScript, html, and Typescript which is a superset of JavaScript. Angular provides built-in features for animation, http service, and materials which in turn have features such as auto-complete, navigation, toolbar, menus, etc. The code is written in Typescript, which compiles to JavaScript and displays the same in the browser. Audience This tutorial is designed for software programmers who want to learn the basics of Angular 7 and its programming concepts in a simple and easy manner. This tutorial will give you enough understanding on the various functionalities of Angular 7 with suitable examples.

2 Prerequisites Before 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 republish any contents or a part of contents of this e-book in any manner without written consent of the publisher. We strive to update the contents of our website and tutorials as timely and as precisely as possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt.

3 Ltd. provides no guarantee regarding the accuracy, timeliness or completeness of our website or its contents including this tutorial. If you discover any errors on our website or in this tutorial, please notify us at Angular 7 iii Table of Contents About the Tutorial .. ii Audience .. ii Prerequisites .. ii Copyright & Disclaimer .. ii Table of Contents .. iii 1. Angular 7 Overview .. 1 Angular Update to V7 .. 1 Angular CLI .. 1 Application Performance .. 2 Angular Material and CDK .. 2 2. Angular 7 Environment Setup .. 3 Nodejs .. 3 3. Angular 7 project Setup .. 6 app .. 17 4. Angular 7 Components .. 24 5. Angular 7 Modules .. 34 Declaration .. 35 6. Angular 7 Data Binding.

4 37 7. Angular 7 Event Binding .. 44 8. Angular 7 Templates .. 50 9. Angular 7 Directives .. 56 How to Create Custom Directives? .. 56 10. Angular 7 Pipes .. 60 How to Create a Custom Pipe? .. 63 11. Angular 7 Routing .. 66 Component Home .. 67 Angular 7 iv 12. Angular 7 Services .. 74 13. Angular 7 Http Client .. 82 14. Angular 7 CLI Prompts .. 86 15. Angular 7 Forms .. 88 Template Driven Form .. 88 Model Driven 91 Form Validation .. 94 16. Angular 7 Materials/CDK-Virtual Scrolling .. 100 Why do we need Virtual Scrolling Module? .. 100 17. Angular 7 Materials/CDK-Drag and Drop .. 107 18. Angular 7 Animations .. 115 19. Angular 7 Materials .. 121 Menu .. 125 SideNav .. 126 Datepicker.

5 128 20. Angular 7 Testing and Building Angular 7 project .. 132 Testing Angular 7 project .. 132 Buiding Angular 7 project .. 137 Angular 7 1 Angular 7 is owned by Google and the stable release was done on 18th October 2018. This is the latest version of Angular . Below is the list of Angular versions released so far: Version Released Date Angular JS October 2010 Angular Sept 2016 Angular March 2017 Angular November 2017 Angular May 2018 Angular October 2018 The release dates for the next two major upcoming versions of Angular are given below: Version Released Date Angular March/April 2019 Angular September/ October 2019 Google plans to release the major Angular version every 6 months.

6 The version released so 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 V7 Angular 7 is a major release wherein the Angular core framework, Angular CLI, Angular Materials are updated. In case you are using Angular 5 or 6 and want to update to Angular 7, below is the command which will update your app to the recent version of Angular : ng update @ Angular /cli @ Angular /core Angular CLI While doing project setup using Angular CLI, it prompts you about the built-in features available, , routing and stylesheet support as shown below: 1. Angular 7 Overview Angular 7 2 Application Performance In Angular 7, there is bundle budget added in as shown below: Budgets is a feature added to Angular CLI which allows you to set limit inside your configuration to make sure your application size is within the limit set.

7 You can set the size so that the app can be warned when the limit is crossed. Angular Material and CDK The version of Angular Material/CDK is updated in Angular 7. Also there are 2 features added to CDK: virtual scrolling, and drag and drop. Virtual Scrolling Virtual 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 one go and only loaded as per the visibility on the screen. Drag and Drop You can drag and drop elements from a list and place it wherever required within the list. The new feature is very smooth and fast. Angular 7 3 In this chapter, we will discuss the Environment Setup required for Angular 7.

8 To install Angular 7, we require the following: Nodejs Npm Angular CLI IDE for writing your code Nodejs To check if nodejs is installed on your system, type node -v in the terminal. This will help you see the version of nodejs currently installed on your system. Nodejs has to be greater than or , and npm has to be greater than or C:\>node v If it does not print anything, install nodejs on your system. To install nodejs, go to the homepage, of nodejs and install the package based on your OS. The homepage of nodejs is as follows: 2. Angular 7 Environment Setup Angular 7 4 Based on your OS, install the required package. Once nodejs is installed, npm will also get installed along with it.

9 To check if npm is installed or not, type npm v in the terminal as given below. It will display the version of the npm. C:\>npm v Angular 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 on your system. It will take a while to install and once done you can check the version using below command: ng version It will display version details of Angular - cli as well version of others packages as shown below: Angular 7 5 We are done with the installation of Angular 7. You can use any IDE of your choice, , WebStorm, Atom, Visual Studio Code to start working with Angular 7.

10 The details of the project setup are explained in the next chapter. Angular 7 6 In 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 can check the version of node in the command line using the command, node v, as shown below: If you do not get the version, install nodejs from their official site: Once you have nodejs installed, npm will also get installed with it. To check npm version, run npm -v in command line as shown below: 3. Angular 7 project Setup Angular 7 7 So we have node version 10 and npm version To install Angular 7, go to the site, to install Angular CLI.