Web Development with Bootstrap 4 and Angular 2 - Second Edition Table of Contents Web Development with Bootstrap 4 and Angular 2 - Second Edition Credits About the Authors About the Reviewer www.PacktPub.com eBooks, discount offers, and more Why subscribe? Preface What this book covers What you need for this book Who this book is for Conventions Reader feedback Customer support Downloading the example code Errata Piracy Questions 1. Saying Hello! Setting up a development environment Defining a shell Installing Node.js Setting up npm Installing Git Code editor A TypeScript crash course Types Arrow function Block scope variables Template literals The for-of loop Default value, optional and rest parameters Interfaces Classes Modules Generics What are promises? Event loop Asynchronous results via events Asynchronous results via callbacks Asynchronous results via promises Angular 2 concepts Building blocks of Angular 2 Module Metadata Directives Attribute directives Structural directives Component Template Data binding Service Dependency injection SystemJS loader and JSPM package manager SystemJS Loader JSPM package manager Writing your first application TypeScript compile configuration Task automation and dependency resolution Creating and bootstrapping an Angular component Compiling and running Adding user input Integrating Bootstrap 4 Summary 2. Working with Bootstrap Components Bootstrap 4 Introduction to Sass Setting up of Ruby Setting up of Sass Sass crash course Variables Mathematical expressions Functions Nesting Imports Extends Placeholders Mixins Function directives Example project The scenario Gathering customer requirements Preparing use-cases Welcome page Products page Products page Cart page Checkout page Designing layouts with grids and containers Using images Using Cards Using buttons General button styles Outline button styles Button sizes Block level button styles The button with active style The button with inactive state Radio buttons and checkboxes Navs The base Nav Inline navigation Tabs Pills Stacked pills Navigation with dropdowns Navbars Content Colors Containers Responsive Navbar Responsive utilities The Navbar content alignment Summary 3. Advanced Bootstrap Components and Customization How to capture a customer's attention Displaying content with Jumbotron Typography Headings Sub-headings Display headings Lead Inline text elements Abbreviations Blockquotes Address Displaying content with a carousel Carousel container Carousel inner Carousel item Carousel indicators Carousel controls Products page layout Quick Shop component Input group Text addons Sizing Checkboxes and radio option addons Button addons Dropdown menu addons Segmented buttons Categories component List group Listing with tags Linked list groups Button list groups Contextual classes Custom content Creating a product grid Nested rows Product component Images Responsive images Image shapes Image alignment Tags Button groups Sizing Button toolbars Nesting dropdowns Vertical button groups Dropdown menus Dropdown containers Dropdown triggers Dropdown menus with items Menu alignment Menu headers and dividers Menu dividers Disabling menu items Tables table-inverse Striped rows Bordering tables Making rows hoverable Table head options Making table smaller Contextual classes Responsive tables Reflowing tables Shopping cart component Summary 4. Creating the Template Diving deeper into Angular 2 Welcome page analysis Single responsibility principle Naming conventions Barrels Application structure Folders-by-feature structure Shared folder Navigation component Decorators Tree of components NavItem object Template expressions Expression context Template reference variable Expression guidelines Expression operators The Elvis operator The pipe operator The custom pipes Template statements Statement context Statement guidelines Data binding HTML attributes versus DOM properties Interpolation Property binding Attribute binding Class binding Style binding Event binding Custom events Two-way data binding Built-in directives NgClass NgStyle NgIf NgSwitch NgFor Structural directives Custom structural directive Category product component Summary 5. Routing Modern web applications Routing Routing path Installing the router The base URL The Angular router The router configuration Creating basic routes Query parameters Router parameters Route versus query parameters Register routing in bootstrap Redirecting routes Router outlet Welcome View The footer component The category data Category card view The product data Products View Quick shop component List of categories component Update the CategoryModule Router links Product card Products grid component Card groups Card columns Card desks Combine them all together The product module Update the AllModule Router change events Routing strategies Summary 6. Dependency Injection What is dependency injection? A real-life example Dependency injection Constructor injection Other injection methods Components versus services ReflectiveInjector Injectable decorator Inject decorator Optional decorator Configuring the injector Class providers Aliased class providers Value providers Multiple values Factory providers The hierarchy of injectors Category service Injector provider for category service Product service Injector provider for product service The shopping cart The Cart model and CartItem The CartService The Cart menu component Cart module Update the Navbar Update the Cart via Service Summary 7. Working with Forms