Angular Material: Ultimate Masterclass With Angular 9 (2020)

Learn how TypeScript uses classes as blueprints for objects in object oriented programming. Discover fields and methods, illustrated with a human example, and how to define a class in code.

Explore TypeScript classes and objects, defining fields such as first name, last name, eye color, hair color, age, and methods like get name and get all data.

Master advanced TypeScript class constructors by enforcing five properties, using optional parameters, and safely handling undefined values with conditional logic in getAllData.

Learn how private, public, and protected modifiers govern access in a TypeScript class, with examples like private first name and protected last name.

Explore shorthand initialization in TypeScript classes by declaring fields directly in the constructor, using access modifiers (private, protected, public), and eliminating redundant declarations for concise class definitions.

Explore how the static keyword defines class-level fields and methods in TypeScript, enabling access via the class name without creating objects, with examples of get name and hello world.

Explore inheritance in TypeScript by extending a base class, using super in constructors, and combining fields from parent and child classes to create objects.

Learn to implement interfaces in TypeScript classes, enforce required properties, and use constructors to initialize values.

Apply two interfaces to a TypeScript class, enforce properties like name, age, and color through the constructor, and implement a method to demonstrate interface-driven behavior and error resolution.

Explore how interfaces extend a class in TypeScript, and how an object can satisfy the extended interface with properties from the class (name and age) when compiled to JavaScript.

Explore how abstract classes in TypeScript define behavior, enforce implementation in derived classes, and show why you cannot instantiate an abstract class, with extends, super, and abstract methods and properties.

Learn how read-only properties in TypeScript restrict updates on classes and interfaces, preventing reassignment of name and age and shaping object creation and module usage.

Explore TypeScript modules, export and import patterns, and how to organize large codebases across multiple files with a nav bar example, preparing for module compiling.

Compile TypeScript modules by exporting data and loading them with a loader, while exploring module targets (amd, commonjs, umd, systemjs) and tsc configuration.

Explore Angular 9, a Google-built front-end framework based on TypeScript, using TypeScript syntax to manage JavaScript applications; learn about its February 7, 2020 release and the upcoming environment setup.

Install node and npm, then install the Angular CLI globally. Create a new Angular app with ng new, then run ng serve to view at localhost:4200.

Understand the Angular project structure, including the main folder, node_modules, environment and assets folders, the app route, and how to start and build the app.

Explore how Angular builds apps from components, including html, ts, and style files, and wire them through modules and routing to the browser.

Learn how the component.ts file defines a component, its selector and templateUrl, and connects the HTML template to component logic for data binding.

Explore data binding in Angular 9, covering one-way and two-way binding, interpolation between a component and its view, and data flow from view back to the component.

Explain the difference between HTML attributes and DOM properties in Angular, using interpolation, attribute binding, and property binding with practical image and table examples.

Explore how JavaScript expressions power data binding in Angular 9, using the ternary operator and interpellation binding, plus property and attribute bindings to render titles based on conditional logic.

Explore class binding in angular 9, using static and dynamic classes, booleans, and functions to apply my class one and my class two with color and background changes.

Master style binding in Angular by binding color, background color, and borders to tile elements using square brackets, including boolean-driven ternary logic and inline style strings.

Explore event binding in Angular 9, sending data from the view to the component via the click event, accessing the event object, and logging or processing the event data.

Explore javascript events in Angular, learn to handle click and double-click events, pass event data, and log results while covering mouse down, mouse up, drag and drop, and keyboard events.

Explore two-way data binding in Angular 9 by sending data from the view to the component and back, using event binding to update the view with the component’s data.

Master two-way data binding in Angular 9 using ngModel and the Forms module, enabling real-time data flow from view to component and back via an input bound to a variable.

Learn to bind input values to an array, push items into collected data, and display them in the view using ngFor in Angular 9.

Explore how angular directives are found by the compiler in the view and executed in the DOM, covering attribute, component, and structural directives and custom attribute directives.

Create an attribute directive in Angular 9 to change a host element's background color with ElementRef. Apply the app color changer in a template to test the directive.

Explore interactive attribute directives in Angular 9 using @Input to pass background and text color values. Learn to apply the directive to elements via binding and change colors dynamically.

Explore host listeners in attribute directives to enable interactivity in Angular 9. See mouse enter and mouse leave events drive color changes and dynamic behavior in directives.

Explore structural directives in Angular 9, learning how ngIf removes elements from the view, differs from attribute directives, and uses boolean logic, not, and or operators.

Learn to use the ngFor directive in Angular 9 to iterate arrays and render each object’s properties, such as id, name, and subject, with index-based IDs.

Explore how to implement the ngSwitch directive in Angular 9 by binding a switch source, defining cases and a default, and rendering templates in the view.

Discover ng-template in Angular 9 and its use with structural directives like ngIf, ngFor, and ngSwitch, including the asterisk syntax that turns elements into templates and supports custom structural directives.

Explore how TemplateRef and ViewContainerRef control embedded views, using the view container to create and manage embedded templates with the myIf directive, including creating, clearing, and removing views.

Explore the Angular input decorator and how it enables data flow from a parent component to a child component, using the color changer directive and header example.

Create a custom structural directive in Angular 9 to control template rendering with a boolean condition, using view container ref and embedded views, inspired by ngIf.

Create a custom structural directive in Angular 9 that toggles content using a template and view container. Use a boolean or alternate parameter to control when content shows in ng-template.

Learn how to fetch data from APIs using http requests, explore JSON responses from JSON Placeholder, and handle arrays and objects in Angular applications for real-world data retrieval.

Learn how http requests work using Angular HttpClient to send get and post requests, handle responses and errors, and manage observables with subscribe and pipes.

Learn how to fetch data with an http get request in angular using observables and subscribe, compare with the general TypeScript approach, and handle data in the view.

Learn to fetch data with HttpParams in Angular using HttpClient. Implement query parameters like user I.D. to retrieve specific posts and understand parameter naming and proper usage.

Master the output decorator and event emitters in angular 9 to send data from child to parent, trigger functions, and display updated results.

Explore setters and getters in Angular using set accessors, with a private input data model bound to an input field, console logging, and uppercase filtration.

Master how to implement get and set accessors in Angular 9, returning input data, using the same property name for consistency, and verifying results via console logs.

Retrieve COVID-19 data from an API using documented routes, explore global and country data, understand JSON responses, and experiment with Postman to build data-driven applications.

Explore the covid-19 API documentation, access the summary, countries, and day-one endpoints, and learn how to interpret responses, data volume, and webhook notifications.

Create a summary component, apply a dark gray body background, import a Google font for typography, and structure six data blocks beneath the main title world report summary.

Demonstrate how http requests travel from client to server, inspect the network tab for the request to posts with a userId parameter, and interpret status codes like 200 and 304.

Explore http status codes, redirects, and typical client-server responses from the network tab, including 3xx redirects and 4xx/5xx errors with practical examples.

Post data to a server with an HTTP post to jsonplaceholder.typicode.com, building a post object (title, body, userId) and handling the response with an observable in Angular.

Submit dynamic data in an Angular app by binding inputs to a post data object with ngModel and the forms module. View the submitted post and handle server responses.

Style the summary section by designing the title and six data blocks with borders, padding, and shadows, showing totals such as total confirmed, total recovered, and total deaths.

Retrieve covid19 api data using Angular http client and observables, subscribe to the response, and access global and country details.

Pass selected data from the app component to the summary component using the input decorator, wiring a GDP client and an observable to populate the global data in the summary.

Master how the Angular component lifecycle governs data flow by illustrating why constructor runs before input data arrives and how OnChanges handles data loaded from an API.

Learn to pull a single country from a global countries array and pass its data to a dedicated country component in an Angular app, using a country code.

Receive the U.S. data in the country component via input binding and display it in the single country view, then adjust margins and panel layout for future multi-country lists.

List the countries data in a table by passing the countries array to the all countries component via input, using on changes to render and show country name and totals.

Learn to sort the all countries data by total confirmed cases using JavaScript's sort method with a comparator, mutating the array to update the display order.

Fixes a covid api bug by initializing all countries as an empty array, since forEach requires an array; data can shift from object to array, producing the country list.

Learn how Angular Material, a UI component library for Angular, enables modern web pages and cross-device compatibility by providing reusable components and module imports for Angular developers.

Install angular material with ng add @angular/material, select Indigo Pink, enable animations, then import MatSliderModule and use mat-slider to implement a material slider.

Explore how Angular Material typography formats text with size, weight, and line height, using mat display, mat heading, mat subheading, and mat body to create clear typographic hierarchy.

Learn to implement Angular Material buttons by importing the Button module, creating simple and material buttons, and exploring seven styles—raised, flat, stroke, fab, mini fab—plus colors and icons.

Explore how to implement and customize mat button toggle groups in angular material, including importing MatButtonToggleModule, configuring multiple selections, value binding, vertical layouts, disabled states, and the appearance legacy option.

Learn to implement badges in Angular Material by adding the MatBadgeModule, applying badge values, and controlling overlap and color for buttons and text.

Explore badges in Angular Material, learn how to position badges on text and buttons, and adjust badge size using above, below, before, and after.

Import and use the Angular Material chips module, create mat-chip-list with mat-chip items, customize with primary and accent colors, toggle disabled state, and prepare for chip input and keyboard accessibility.

Explore how to set up Angular Material icons by importing MatIconModule, using the mat-icon component, and selecting icons such as home and faith, with optional color styling.

Explore how to implement Angular Material progress features using mat spinner and mat progress spinner, control values for determinate and indeterminate modes, and create effective loading indicators.

Learn to implement Angular Material progress bars by importing the mat progress bar module, configuring determinate, indeterminate, buffer, and query modes, and applying colors.

Learn to build a complete angular material card with image, title, data, and action buttons using mat-card, mat-card-title, mat-card-subtitle, mat-card-content, and mat-card-actions.

Install and use dividers and expansion panels in Angular Material by importing the MatDividerModule and MatExpansionModule, then configure panel headers, descriptions, and an accordion layout.

Explore Angular Material lists, from simple lists with mat list items and dividers to navigation links and buttons, and learn to implement selection and action lists with options.

Explore how to implement steppers with Angular Material, using mat stepper components, labels, and next/previous buttons. Learn to configure horizontal and vertical steppers for multi-step forms and navigate between steps.

Learn to create tabs in Angular Material with mat-tab-group and mat-tab, customize labels and content, and adjust alignment and animation duration.

Practice building flexible layouts with Angular Material's grid list by configuring mat-grid-list and mat-grid-tile, setting column counts, row height ratios, and gutter gaps.

learn to build a responsive layout in angular material using grid list, mat-grid-list and mat-grid-tile, configuring columns per row and spanning to structure header, navigation, content, and footer.

Learn to implement a toolbar in Angular Material by importing MatToolbarModule, using mat toolbar and mat toolbar row to create multiple rows, and styling with primary, accent, and warning colors.

Explore how to implement menus in Angular Material using mat-menu and mat-menu-item, connect them with a button via mat-menu-trigger-for, and build submenus with separate mat-menu definitions.

Learn how to implement angular material sidenav with full-screen and partial drawer modes, using mat-sidenav-container and toggle buttons to control side navigation and main content.

Explore implementing a side drawer with Angular Material, compare side drawer and side nav, configure modes like over and push, and manage open state and layout margins.

Learn to implement pagination with angular material by importing the paginator, configuring length, page size and page size options, and binding dynamic data from server for multi-page displays.

Explore how to design tables with Angular Material using mat-table, defining a student data interface, creating a data source, and mapping columns for name, subject, roll number, and age.

design and implement angular material table columns by defining the data source and mat column def with header and cell templates, binding student data like name, subject, and age.