Angular Material Fundamentals

This short book (or Shook as I'm calling them) is a guide on how to set up Angular on your PC.

This guide explains covers installing Node Version Manager (nvm) on both Linux and Windows, Installing Node (in nvm) and installing Angular, creating a new Angular project and adding Angular Material to this project.

Everything you need to get started writing awesome Angular applications.

This short book (Shook) is about setting up Angular Material Common Components in an Angular application. In this Shook, we will cover five different components.

• Inputs - text, number, email etc...
• Mat-Checkboxes - learn about the three states and how to set them
• Mat-Radio Buttons - learn about the states, grouping and change events
• Mat-Slide-Toggle - learn about how to set up a slide toggle
• Buttons - learn about the directives, properties and methods

In this Shook, we'll cover adding these components to an Angular project and walk through the five components listed above with code examples and explanations.

You will also be able to download the code from a GitHub repository.

This short book (Shook) is about setting up an Angular Material Autocomplete component in an Angular application. In this Shook, we will cover five different scenarios.

1. Simple autocomplete - covering the basics.
2. Custom filter - applying a custom filter.
3. Highlight the first option - highlight the first option in an autocomplete list.
4. Attaching to a different panel - attach the autocomplete panel to a different component.
5. Option groups - set up option groups in the autocomplete panel.

In this Shook, we'll cover adding an Autocomplete to an Angular project and walk through the five scenarios listed above, with code examples and explanations.

You will also be able to download the code from a GitHub repository.

When building forms in your Angular application it's a good idea to have a consistent look and feel for those forms, the Angular Material library provides us with the Mat-Form-Field component to do just that. In this Shook, I will walk you through those various options with code examples along the way.

We will learn how to set up the various options of the mat-form-field component and what these look like, we'll cover the following sections.

• Setting up a simple Mat-Form-Field component
• Changing the appearance and the four options available
• Setting up floating labels
• Hint messages
• Error messages
• Setting these options globally

You will also be able to download the code from a GitHub repository.

When using Angular Material and SVG images, most of the time you will probably just use the web fonts from the Angular Material Icon library. But there are times when we need to use local SVG icons, this Shook looks at the following:

• How to set up the Mat-Icon.
• How to register Icons.
• How to change the colour of an Icon.
• How to set up a service to register Icons, to reduce code duplication.

This Shook also includes copies of the Angular Setup Guide (one using ngModules and one for the NEW Standalone component feature), which explains how to set up Angular CLI, Node, Node Version Manager (nvm) and how to add Angular Material to an Angular project.

★★★★★

What the readers think: J.Warner

Duncan is one of the more knowledgeable people I know when it comes to Angular Material. In this ebook, he explores how to use the tools provided by Angular Material to add your own SVG icons. He covers some important topics like how to avoid XSS attacks when using your own SVG icons, how to cut down on repetitive code when adding SVG icons and how to control colours when certain events happen. I appreciate his writing style and the step-by-step guide with code to help add my own SVG icons to Angular Material.

This short book (or Shook as I'm calling them) is a guide on how to set up Angular on your PC. This guide explains in a step-by-step way from installing Node Version Manager (nvm), Installing Node and Angular and Angular Material.

Everything you need to get started writing awesome Angular applications.

This Shook covers the nvm, Node, Angular and Angular Material setup but uses Angular 14's new standalone features. 

This short book (or Shook as I'm calling them) is about setting up an Angular Material Table with a Drag and Drop feature.

We will cover the following topics in this Shook.

• Adding an Angular Material table to a project.
• Add Drag and Drop support using the Angular CDK library
• We will add SCSS to style the Drag and Drop preview to make it stand out when users are dragging an item.
• Bonus Content - we will also look at creating a simplified version that doesn't use a table but gives us a similar user experience.

This Shook also includes copies of the Angular Setup Guide (one using ngModules and one for the NEW Standalone component feature), which explains how to set up Angular CLI, Node, Node Version Manager (nvm) and how to add Angular Material to an Angular project.