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, https://nodejs.org/en/download/ 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 homepagehttps://cli.angular.io/ 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: https://nodejs.org/en/.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:6
Angular 7So we have node version 10 and npm version 6.4.1.To install Angular 7, go to the site, https://cli.angular.io 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 the stylesheet:The options available are CSS, Sass, Less and Stylus. In the above screenshot, the arrowis on CSS. To change, you can use arrow keys to select the one required for your projectsetup. At present, we shall discuss CSS for our project-setup.9
Angular 7The project angular7-app is created successfully. It installs all the required packagesnecessary for our project to run in Angular7. Let us now switch to the project created,which is in the directory angular7-app.Change the directory in the command line using the given line of code:cd angular7-appWe will use Visual Studio Code IDE for working with Angular 7, you can use any IDE, i.e.,Atom, WebStorm, etc.To download Visual Studio Code, go to https://code.visualstudio.com/ and click Downloadfor Windows.10
Angular 7Click Download for Windows for installing the IDE and run the setup to start using IDE.Following is the Editor:11
Angular 7We have not started any project in it. Let us now take the project we have created usingangular-cli.We will consider the angular7-app project. Let us open the angular7-app and see howthe folder structure looks like.12
Angular 7Now that we have the file structure for our project, let us compile our project with thefollowing command:ng serveThe ng serve command builds the application and starts the web server.13
Angular 7You will see the below when the command starts executing:The web server starts on port 4200. Type the url, http://localhost:4200/ in the browserand see the output. Once the project is compiled, you will receive the following output:14
Angular 7Once you run url, http://localhost:4200/ in the browser, you will be directed to thefollowing screen:Let us now make some changes to display the following content:“Welcome to Angular 7!”15
Angular 7We have made changes in the files — app.component.html and app.component.ts.We will discuss more about this in our subsequent chapters.Let us complete the project setup. If you see we have used port 4200, which is the defaultport that angular–cli makes use of while compiling. You can change the port if you wishusing the following command ng serve--host 0.0.0.0–port 4205The angular7-app/ folder has the following folder structure: e2e/: end to end test folder. Mainly e2e is used for integration testing and helpsensure the application works fine. node modules/: The npm package installed is node modules. You can open thefolder and see the packages available. src/: This folder is where we will work on the project using Angular 7.Inside src/you will app/ folder created during the project setup and holds all the required filesrequired for the project.The angular7-app/ folder has the following file structure: angular.json: It basically holds the project name, version of cli, etc. .editorconfig: This is the config file for the editor. .gitignore: A .gitignore file should be committed into the repository, in order toshare the ignore rules with any other users that clone the repository. package.json: The package.json file tells which libraries will be installed intonode modules when you run npm install.16
Angular 7At present, if you open the file package.json in the editor, you will get the followingmodules added in it:"@angular/animations": " 7.2.0","@angular/common": " 7.2.0","@angular/compiler": " 7.2.0","@angular/core": " 7.2.0","@angular/forms": " 7.2.0","@angular/platform-browser": " 7.2.0","@angular/platform-browser-dynamic": " 7.2.0","@angular/router": " 7.2.0","core-js": " 2.5.4","rxjs": " 6.3.3","tslib": " 1.9.0","zone.js": " 0.8.26"In case you need to add more libraries, you can add those over here and run the npminstall command. tsconfig.json: This basically contains the compiler options required duringcompilation. tslint.json: This is the config file with rules to be considered while compiling.The src/ folder is the main folder, which internally has a different file structure.appIt contains the files described below. These files are installed by angular-cli by default.app.module.tsIf you open the file, you will see that the code has reference to different libraries, whichare imported. Angular-cli has used these default libraries for the import: angular/core,platform-browser.The names itself explain the usage of the libraries. They are imported and saved intovariables such as declarations, imports, providers, and bootstrap.We can see app-routing.module is also added. This is because we had selected routingat the start of the installation. The module is added by @angular/cli.Following is the structure of the file:import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppRoutingModule } from './app-routing.module';import { AppComponent } from './app.component';17
Angular 7@NgModule({declarations: [AppComponent],imports: [BrowserModule,AppRoutingModule],providers: [],bootstrap: [AppComponent]})export class AppModule { }@NgModule is imported from @angular/core and it has object with following properties:declarations: In declarations, the reference to the components is stored. TheAppcomponent is the default component that is created whenever a new project isinitiated. We will learn about creating new components in a different section.imports: This will have the modules imported as shown above. At present, BrowserModuleis part of the imports which is imported from @angular/platform-browser. There is alsorouting module added AppRoutingModule.providers: This will have reference to the services created. The service will be discussedin a subsequent chapter.bootstrap: This has reference to the default component created, i.e., AppComponent.app.component.css: You can write your css over here. Right now, we have added thebackground color to the div as shown below.The structure of the file is as follows:.divdetails{background-color: #ccc;}app.component.htmlThe html code will be available in this file.The structure of the file is as follows: !--The content below is only
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 .
it could be considered a new framework. Angular versions 2 and up are backward compatible till the Angular 2, but not with Angular 1. To avoid confusion, Angular 1 is now named Angu-lar JS and Angular versions 2 and higher are named Angular. Angular JS is based on JavaScript while Angular is based on JavaScript superset called TypeScript.
Angular Kinetics similar comparison between linear and angular kinematics Mass Moment of inertia Force Torque Momentum Angular momentum Newton’s Laws Newton’s Laws (angular analogs) Linear Angular resistance to angular motion (like linear motion) dependent on mass however, the more closely mass is distributed to the
Both Angular 2 and 4 are open-source, TypeScript-based front-end web application platforms. is the latest version of Angular. Although Angular 2 was a complete rewrite of AngularJS, there are no major differences between Angular 2 and Angular 4. Angular 4 is only an improvement and is backward compatible with Angular 2.
0. Since the angular measure q is the angular analog of the linear distance measure, it is natural to define the average angular velocity Xw\ as Xw\ q f-q 0 Dt where q 0 is the initial angular position of the object when Dt 0 and q f is the final angular position of the object after a time Dt of angular motion.
The structure of Angular is based on the components/services architecture. AngularJS was based on the model view controller. Angular 4 released in March 2017 proves to be a major breakthrough and is the latest release from the Angular team after Angular2. Angular 4 is almost the same as A
Mobile Angular UI is an open-source framework for developing hybrid mobile apps. Mobile Angular UI makes use of Twitter Bootstrap and AngularJS that helps to create attractive HTML5 hybrid mobile and desktop apps. Features of Mobile Angular UI Mobile Angular UI has some cool components that are listed below:
Chapter 1: Getting started with Angular Remarks Angular (commonly referred to as "Angular 2 " or "Angular 2") is a TypeScript-based open-source front-end web framework led by the Angular Team at Google and by a community of individuals and corporations to address all of the parts of the developer's workflow while building complex web applications.
Angular JS Angular Course Curriculum Our Angular course content covers all Client-side technologies which is prepared by our Angular experts to make it suitable for everyone and ensure that it covers all the industry related skills and techniques to start a successful career growth. Our Experts always updating the Angular
