Venkata Keerti Kotaru

Angular for Material Design

Leverage Angular Material and TypeScript to Build a Rich User Interface for Web Apps

Venkata Keerti Kotaru
Hyderabad, India
ISBN 978-1-4842-5433-2e-ISBN 978-1-4842-5434-9
https://doi.org/10.1007/978-1-4842-5434-9
© Venkata Keerti Kotaru 2020
Standard Apress
Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights.
While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein.
Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail [email protected], or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation.

To my parents, who inspire me.

To my wife and daughter, who let go all those weekends.

Introduction

This book explains building a web user interface with Angular, a powerful framework for web applications. The book describes using the Angular Material library with Material Design components. This library provides multiple, ready-made, easy-to-use components that work well with an Angular application.

This book uses Angular with TypeScript, which is a JavaScript superset. TypeScript enables you to use data types and to program constructs such as classes, interfaces, generic templates, and so forth.

This book guides you to build applications that take advantage of various Angular features, including data binding, components, and services. It describes building a single-page application and interfacing with remote services over HTTP.

This book is for beginner to intermediate-level professionals. In addition to building web applications using Angular and TypeScript, it explains Material Design—a design language by Google—constructs and components. It has been popular since its introduction into Android (version 5/Lollipop). Various Google products, including Gmail, YouTube, Google Drive, Google Plus, and Google Docs, have been built with this design language.

Table of Contents

Chapter 1:​ Introduction 1
Web Technologies 1
Introduction to Angular 2
Angular’s Roots in MV* 3
Angular from AngularJS 5
TypeScript 6
Material Design 7
What Is a Design Language?​ 7
How Does It Help Us?​ 7
How About Brand Value?​ 8
Typography 8
Angular Material Components 8
Conclusion 8
References 9
Chapter 2:​ Getting Started 11
Prerequisites 11
Node.​js 11
Package Managers 12
Angular CLI 13
Visual Studio Code 13
Getting Started with a Sample Application 14
Option 1:​ Getting Started Using Angular CLI 14
Option 2:​ Material Design for an Existing Application Without Angular CLI 17
Add Material Design Code References 18
Module Reference 18
Modify Template 19
Sample Application 20
Storyline 20
Features 20
Files and Directories Generated by CLI 21
Configuration Files at the Root 22
Default Application Directory Root:​ /​src 23
Application Directory:​ /​src/​app 25
Scripts 26
Start Script 26
The build Script 28
The lint Script 30
Conclusion 31
Exercise 31
References 32
Chapter 3:​ Modules 33
JavaScript Modules 34
Angular Modules 35
An Approach to Modules 37
Create an Angular Module 38
NgModule Decorator Complete List of Fields 41
More About JavaScript Modules 43
The Primary Ways to Import and Export Code 43
Import All 46
Conclusion 46
References 47
Chapter 4:​ Angular:​ Components 49
Introduction 49
Create a Component 51
selector 53
templateUrl 53
template 54
styleUrls 54
style 54
encapsulation 55
providers 55
viewProviders 56
Input to a Component 61
Validate Input with a Setter 62
Validate Input with the ngOnChanges Lifecycle Hook 63
Output from a Component 64
Lifecycle Hooks 65
Conclusion 68
References 69
Exercise 69
Chapter 5:​ Angular:​ Data Binding and Change Detection 71
Interpolation 71
Property Binding 73
Alternate Syntax for Property Binding 74
Class Binding (CSS classes) 75
ngClass Directive 77
Style Binding 78
ngStyle Directive 80
Event Binding 81
Two-Way Data Binding 84
Change Detection 86
Change Detection Strategy 88
Conclusion 92
Exercise 92
References 93
Chapter 6:​ Angular:​ Directives 95
Directives 95
Using the ng-template Directive in the HTML Template 96
Using if…else Conditions in the HTML Template 97
Using the ng-container Directive in the HTML Template 99
Using a Switch Case in the HTML Template 101
Iterate Through an Array in the HTML Template 102
Change Styles On the Fly with ngStyle 105
Conclusion 107
Exercise 108
References 108
Chapter 7:​ Angular:​ Services and Dependency Injection 109
Asynchronous Function Calls 109
JavaScript Promises 110
Reactive Programming with RxJS 113
Observable 113
Create an Observable 114
Angular Services 115
Create a Service 116
Dependency Injection in Angular 116
Provider for a Service 116
Conclusion 125
Exercise 126
References 126
Chapter 8:​ Material Design:​ User Input 127
Material Input Elements 127
Material Design Form Fields 128
Appearance 129
Text Field Within mat-form-field 130
Superheroes Code Sample 131
Floating Label 133
Required Field 134
Hint Text 135
Input Types with matInput 136
Text Area Within mat-form-field 137
Material Drop-downs 139
Categorize Options 142
Multiselect 143
Material Design:​ Chips 144
Add Items to a Chip List 146
Remove Items from a Chip List 148
Conclusion 149
Exercise 149
References 150
Chapter 9:​ Angular:​ Building Forms 151
Template-Driven Forms 151
Getting Started with Template-Driven Forms 151
Approach to Building Forms 152
Form Validation and Errors 158
Using the State Field in Form Controls 161
Reactive Forms 165
Getting Started with Reactive Forms 165
Create a Form Control with Form Builder 166
Capture Changes to the Form Control 169
Set a Value on FormControl 170
Create a Form Group with Form Builder 171
Form Validation 178
Show Form Status and Errors 181
Valid/​Invalid 182
touched/​untouched 183
pristine/​dirty 183
Conclusion 185
Exercise 186
References 186
Chapter 10:​ Material Design:​ Additional Form Fields 187
Material Design Date Picker Control 187
Getting Started 188
Date Picker Component 190
Filter Dates 194
Slider 197
Getting Started 197
Slider in an Input Form 198
Toggle Switch and Check Box 201
Getting Started with Toggle Switch 202
Getting Started with Check Box 203
Toggle Switch in an Input Form 203
Check Box in an Input Form 207
Conclusion 211
Exercise 211
References 211
Chapter 11:​ Angular:​ Routing 213
Getting Started 213
Route Configuration 215
Router Outlet 217
Linking to a Route 219
Navigate for Actions 219
Route Parameters 220
Using Snapshot to Read Route Param 222
Using an Observable to Read Route Param 225
Optional Route Params 227
Default Route 231
Multiple Routes to a Component or a Page 232
Undefined Route 233
Conclusion 235
Exercise 235
References 236
Chapter 12:​ Material Design:​ Navigation 237
Toolbar 237
Getting Started 237
Actions on the Toolbar 242
Multiple Rows in the Toolbar 244
Toolbar Theme 245
Integration with Angular Router 246
Sidenav 249
Getting Started 250
Organizing the Sample Application for Sidenav 254
Using a Menu Button to Toggle sidenav 258
Conclusion 262
Exercise 263
References 263
Chapter 13:​ Material Design:​ Layout 265
Material Design:​ Card 265
Getting Started 266
Using Angular Material Card 267
Angular Material Card with Images 269
Material Design:​ Tabs 271
Getting Started 272
Using Angular Material Tabs 274
Router Integration with Tabs 276
Expansion Panel 278
Getting Started 279
Using the Expansion Panel 281
Conclusion 285
Exercise 285
References 286
Chapter 14:​ Material Design:​ Using Lists 287
Material Design List 287
Getting Started 288
Using Material Design List Component 292
Navigate to the Details After Clicking a Superhero 294
Action List with Material Design 296
Selection List with Material Design 297
Grid List 299
Getting Started 300
Using Material Design Grid List Component 304
Conclusion 307
Exercise 308
References 308
Chapter 15:​ Material Design:​ Alerts and Dialogs 309
Material Dialog 309
Getting Started 310
Sample:​ Confirm Cancel 311
Launch Material Dialog 314
Send Data to the Material Dialog 315
Provide Default Configuration for Material Dialog 318
Send Data to the Parent Component 319
Bottom Sheet 321
Getting Started 322
Send Data to the Bottom Sheet 327
Provide Default Configuration for Bottom Sheet 329
Snack-bar 330
Getting Started 331
Conclusion 334
Exercise 334
References 335
Chapter 16:​ Angular:​ HTTP Client 337
Getting Started 337
Mock Data 340
Use HttpClient to Make HTTP Calls 341
Explicitly Type Response Object 344
Return Data to the Calling Function 345
Handling Errors with Remote Service Calls 350
POST Calls with HttpClient 352
PUT Calls with HttpClient 354
DELETE Calls with HttpClient 355
Conclusion 356
Exercise 357
References 357
Index 359

About the Author and About the Technical Reviewer

About the Author

Venkata Keerti Kotaru
../images/475625_1_En_BookFrontmatter_Figb_HTML.jpg

has been in software development for more than 17 years. He is a three-time Microsoft MVP. He is the author of a book on AngularJS and several technology articles that appear on DotNetCurry.com and DNC Magazine. He holds a master’s degree in software systems from the University of St. Thomas in St. Paul, Minnesota.

Keerti started a technology meetup group, AngularJS Hyderabad, for which he has been a regular speaker. He has presented multiple sessions at Google Developers Groups (GDG) and Google’s annual DevFest event. He has presented technology sessions for TechGig, AngularJS Pune, and AngularJS Chicago meetup groups.

 

About the Technical Reviewer

Giancarlo Buomprisco
../images/475625_1_En_BookFrontmatter_Figc_HTML.jpg

is an Italian software developer specializing in building front-end applications.

Giancarlo’s journey to become a software developer started at the University of Pisa, Italy, where he studied both computer science and humanities.

Soon after graduation, Giancarlo moved to London to work for King’s College London as a research developer, developing applications with JavaScript and Python to help researchers with their scientific studies.

During this experience, Giancarlo developed a great passion for building rich client-side applications with a great user experience, which led him to specialize in JavaScript and various front-end technologies, such as Typescript, Angular, and RxJS using clean code and agile practices.

Having worked for large and small companies, Giancarlo is currently a front-end consultant for top-tier financial institutions in London.

Other than writing code, he is likely to be found working out at the gym, writing articles on his blog, or trying culinary specialties across London.

 
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.145.59.187