 Resources from Juri Strumpflohner in 2021

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

Besides sending (or requesting) the actual data to the server API, there’s also often the need to send further metadata that helps the server to correctly interpret our request. Such data is most often sent using HTTP headers. In this lesson we learn how to leverage Angular’s `HttpClient` to set such headers.
Note that when you have to continuously send certain application headers to the backend, for each single HTTP call that is being made, you may be better served by placing them in an HTTP interceptor. Take a look at [this lesson for more details on how to implement that](https://egghead.io/lessons/intercept-http-requests-in-angular).

Set Metadata in HTTP Headers with Angular HttpHeaders

When the communication with the backend fails, before giving the user a negative response, it might be worth trying to automatically recover from the error. In some cases, that can be as simple as retrying to issue the request again. Since the Angular `HttpClient` heavily relies on RxJS we can apply some of its operators to make this happen, such as `retry`, `retryWhen` and `delay`.

Retry Failed Requests with RxJS and the HttpClient in Angular

Usually on web sites, if you pay attention to a good user experience, you define a custom 404 page, telling the user he arrived at some dead end. Similarly we should do for our Angular application routing. In this lesson we learn how to define such “404 route” using the Angular router.

Catch an invalid route navigation with the Angular router

A common use case is to redirect to some home view of your application, especially at the first visit of the user. In this lesson we are going to learn how to define a redirect with the Angular router.

Create a redirect rule with the Angular router

The network may be unreliable and loading data may take time. Thus it is important to give the user some feedback about what's going on as fast as possible. In this lesson we learn how to leverage the `else` block of the `*ngIf` directive to show a simple loading indicator.

Show a loading indicator in Angular using *ngIf/else, the as keyword and the async pipe

Components are first class citizens in an Angular application. Therefore, naturally each route points to an Angular component which gets activated whenever that route is triggered. In this lesson we will learn how to define such “routing components”, how to configure them on our router and how to activate them accordingly. Note, the router has been already installed using `npm install @angular/router --save`.

Define and configure a route with the Angular router

By default the response body doesn’t contain all the data that might be needed in your app. Your server might return some special header which you have to read explicitly. In such case we can use the `{ observe: ‘response’}` configuration of the Angular `HttpClient`. Let’s explore how.

Read Custom HTTP Headers Sent by the Server in Angular

When communicating with some backend API, data travels over the network using the HTTP protocol. As such, failures may occur, be it on our own device (i.e. the browser) or on the server-side which may not be available or unable to process our request. We need to handle such error responses and give the user a proper feedback.

Handle HTTP Errors in Angular with HttpErrorResponse

In this lesson we will take a look at how Angular makes use of the style property. This is a powerful concept that allows us to very easily add CSS styles onto HTML elements. These styles can even be easily made conditional.

Style HTML elements in Angular using the style property

Angular allows you to add a single CSS class to HTML elements within your component and bind them to a condition. Based on the result of the condition the class gets applied or not. 

Conditionally add a single CSS class to a DOM element in Angular

When we want to add multiple CSS classes on our HTML elements, and possibly even by using some kind of condition, things might get complicated… Fortunately `ngClass` is here to help! We will learn about the various ways `ngClass` allows us to conditionally add multiple classes to HTML elements using a variety of different data structures. 

Style HTML elements in Angular using ngClass

Angular allows us to conveniently use the `async` pipe to automatically register to RxJS observables and render the result into the template once the request succeeds. This has some drawbacks, especially if we want to bind the same data in multiple parts of the template. In this lesson we will learn how we can leverage the `async` pipe and the `as` keyword introduced in Angular version 4.0.0 to circumvent such drawbacks.

Bind async requests in your Angular template with the async pipe and the "as" keyword

We will learn how to make use of the `ngStyle` directive to directly add multiple style attributes to a DOM element as a style property. We’ll also learn how we can make these styles more dynamic through user input. 

Style HTML elements in Angular using ngStyle

One of the fundamentals in a web application is to learn how to communicate with the backend. In this lesson we learn how to install, configure and use Angular’s `HttpClient` introduced in version `4.3.1` to fetch data from some backend API.

Fetch Data from an API using the HttpClient in Angular

Angular has a very robust security model. Dynamically inserted html, style or url values into the DOM open up possibilities for attackers to compromise your site. Thus Angular treats all values as untrusted by default. In this lesson we learn how to “sanitize” values where we are sure they are trustful.

Use Angular style sanitization to mark dynamic styles as trusted values

One thing that we can do is to add styles directly to HTML elements that live within our component. However, in this lesson we see that style classes added to your template HTML within your component get applied to an inner `<div>`  and not your component host. We will learn how to use `:host(...)` and `@HostBinding` to add styling directly to the component host itself.

Use Angular’s @HostBinding and :host(...) to add styling to the component itself

In this lesson we will go low-level and learn how you can get hold of the underlying native DOM element to add styling. Moreover we will learn how to make use of the `Render2` to safely add style properties which even work in a server-side environment.

Use the Renderer2 to add styles to an element in Angular

Automate all the things!! Automation is crucial for increasing the quality and productivity. In this lesson we will learn how to automate the deployment of our Angular app to Firebase Hosting, by using GitHub and Travis. By the end of the lesson we will be able to automatically deploy our app with a simple `git push` to our repository's `master` branch.

Setup automated deployment with Angular, Travis and Firebase

User input validation is a core part of creating proper HTML forms. Form validators not only help you to get better quality data but they also guide the user through your form. Angular comes with a series of built-in validators such as `required` or `maxLength` etc. But very soon you have to build your own custom validators to handle more complex scenarios.  
In this lesson you're going to learn how to create such custom validators for Angular's template driven forms.

Create a custom validator for template driven forms in Angular

User input validation is a core part of creating proper HTML forms. Form validators not only help you to get better quality data but they also guide the user through your form. Angular comes with a series of built-in validators such as `required` or `maxLength` etc. But very soon you have to build your own custom validators to handle more complex scenarios.
In this lesson you're going to learn how to create such custom validators for Angular's **reactive forms**.

Create a custom validator for reactive forms in Angular

Angular’s reactive forms make it easy to dynamically instantiate new `FormControl`s and bind them to our data. 

In this lesson we will take a look how to take a very simple data object, how to create a reactive Angular form and render it to our HTML template for finally binding our data onto it.

Topics

Instructors

Content Type

Free or Pro