Angular for Material Design Leverage Angular Material and TypeScript to Build a Rich User Interface for Web Apps — Venkata Keerti Kotaru Angular for Material Design Leverage Angular Material and TypeScript to Build a Rich User Interface for Web Apps Venkata Keerti Kotaru Angular for Material Design Venkata Keerti Kotaru Hyderabad, India ISBN-13 (pbk): 978-1-4842-5433-2 ISBN-13 (electronic): 978-1-4842-5434-9 https://doi.org/10.1007/978-1-4842-5434-9 Copyright © 2020 by Venkata Keerti Kotaru This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. 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. Managing Director, Apress Media LLC: Welmoed Spahr Acquisitions Editor: Nikhil Karkal Development Editor: Laura Berendson Coordinating Editor: Divya Modi Cover designed by eStudioCalamar Cover image designed by Freepik (www.freepik.com) 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 orders-ny@springer- sbm.com, 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. For information on translations, please e-mail [email protected], or visit http://www.apress.com/ rights-permissions. Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales web page at http://www.apress.com/bulk-sales. Any source code or other supplementary material referenced by the author in this book is available to readers on GitHub via the book's product page, located at www.apress.com/978-1-4842-5433-2. For more detailed information, please visit http://www.apress.com/source-code. Printed on acid-free paper To my parents, who inspire me. To my wife and daughter, who let go all those weekends. Table of Contents About the Author xv About the Technical Reviewer xvii Introduction xix Chapter 1: Introduction1 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 v Table of ConTenTs 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: Modules33 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 vi Table of ConTenTs 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 vii Table of ConTenTs 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 viii Table of ConTenTs 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 ix Table of ConTenTs 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 x