Angular Essentials (Angular 2+ with TypeScript)

Let me introduce you to this course module and what you're going to learn in it.

Before we dive into components, let's make sure we have a development environment we actually want to work with.

Components use templates and templates influence what we see on the screen in the end. Let's dive deeper into this relation in this lecture.

We worked with Components a bit but how does Angular actually work with them? Let's dive into this question in this lecture.

Time to leave the world of "AppComponent" - let's build our first custom component in this lecture.

Obviously, we want to output content when creating an app. Angular offers a couple of ways of achieving this - this lecture explores the first method: String Interpolation.

Outputting content is nice but for a reactive app, we also need to be able to listen to events. This lecture shows how that works.

Let's dive into the third form of databinding: Property binding.

Want to combine event binding with property binding? You actually can! Learn more about two-way-binding in this lecture.

We had a look at property binding - the great thing is: You can also bind to properties of your own components! Learn more about that in this lecture.

Just as you can bind your own properties, you can also emit your own events - and listen to them. More about that in this lecture.

Thus far, we only worked with two components. Let's now add more components and let's also see how the CLI helps you with this.

Angular does something special when it comes to styling your component. Let's take a closer look!

Let me wrap this module up and summarize what you learned.

Want to dive deeper? Have a look at this lecture!

Let me introduce you to this module and what you're going to learn in it.

You can't avoid running into errors - they're going to happen! But error messages can be very helpful as this lecture will show you.

For logical errors, you're not going to get any error messages. But thankfully, you can debug your code at runtime. How? Take a look at this lecture.

You need more insights? Have a look at Augury - a useful Chrome plugin for developing Angular apps.

Sometimes, you need that extra CSS framework. Learn how to easily add CSS framework to your Angular (CLI) project in this lecture.

What about JS libraries - can you add those, too? Yes, of course! This lecture shows how to quickly add a JS library to your Angular (CLI) project.

Let me wrap this module up and summarize what you learned.

Want to dive deeper or learn more? Have a look at this lecture!

Let me introduce you to this module and to what you're going to learn!

Let's dive into the most important question first: What are Directives? This lecture answers this question.

A key directive Angular ships with, is ngFor. Learn how it works and which kind of directive it is in this lecture.

Want to conditionally add or remove CSS classes? Angular's got a directive for you!

We learned about two very important Directives - let's take a closer look at other directives, too.

ngIf is another core directive as you'll learn in this lecture.

Let me wrap this module up and summarize what you learned thus far.

Want to dive deeper? Have a look at this lecture!

Let me introduce you to this module and its goal.

Before you start building any (Angular) project, you first need to plan it, right? Let's do that in this lecture.

The app planning is finished, time to get started!

The app is planned, we also got started, let's now start fill the app and its components with some life.

Obviously our application uses some data. How do we manage that? This lecture helps with that question.

If you need to pass data between components, consider property binding. This lecture shows how to quickly pass data around.

What would you expect if you click a tab link? That the tab looks like it was selected, right? Let's work on that experience in this lecture.

We're not limited to passing data down the component tree. We of course can build our own events and emit them to go the other direction.

Let me wrap this module up and summarize what you learned.

Let me introduce you this module and outline what we're going to learn.

Before we start creating services, you of course need to understand what they are and which role they play. This lecture will do just that.

Now that you know what services are, it's time to create one!

We got a service. Great! How do we use it? Well, this lecture shows how NOT to use it.

Angular ships with a powerful Dependency Injection Framework. This lecture shows you how you may use it to use services in components (or anywhere else in your app).

We already used Dependency Injection. It's a powerful tools and you can use it in different ways. This lecture explores your alternatives.

With Services in place, we can clean up the course project and improve it. Let's do that in this lecture.

What if you want to inject a Service into another Service. Does that work? Yes it does, learn how it works in this lecture.

Let me wrap this module up and summarize what you learned thus far.

Want to dive deeper? Have a look at this lecture!

Let me introduce you to this module and to what you're going to learn in it.

Let's start by setting up a form in a component template. No rocket science but the foundation for all further steps.

Learn how Angular helps you with handling forms in this lecture.

We got a form and with that, users may submit content. Learn how to handle user submissions in this lecture.

Of course you want to make sure that you only work with valid data. This lecture shows you how you may use Angular to easily validate forms.

In the previous lecture, you learned about required. There are other validators, too. Learn more in this lecture.

It's great that we may validate forms, it's even better if we inform the user about incorrect inputs. This lectures explores your options.

We used ngModel in this course module. We also used it earlier in the course - for two-way-binding. How else may you use it?

There is an alternative approach you may use - learn a bit more about it in this lecture.

Does the reactive approach sound interesting to you? Learn more about it in this lecture.

Let me wrap this module up and summarize what we learned.

Want to dive deeper? This lecture is for you!

Let me introduce you to this module and the topics we'll cover.

It's key to understand the differences between server-side and client-side routing. We'll take a closer look at this question in this lecture.

When using routing, it makes sense to have a header. In this lecture, we're going to create one.

Enough of the preparation - time to finally add routing to our application!

Having routes is great, but typically, you provide a better user experience if you provide links. Learn how to easily add links in this lecture.

If the user enters an unknown route, you probably want to handle that. This lecture dives into your options.

Now we're getting advanced - let's dive into child routes and route params!

Being able to pass dynamic data via route params is great but it's only useful if you can extract that data. This lecture shows you how that works.

Did you notice that the page reloads unexpectedly? Let's fix this issue in this lecture - it's a common gotcha!

With routing added, we may clean up our app. Whilst doing that, we'll discover that it kind of broke. We'll fix it soon though!

Let me wrap this module up and summarize what we learned.

Want to learn more? This lecture is for you!

Let me introduce you to this module and the topics we'll cover.

Angular 6 uses RxJS 6 - there are some changes you should be aware of.

We already used it in this course: subscribe(). What does it actually do though? Learn more about it in this lecture.

We need more reactivity in our course project. And actually, you often need to be able to push events from one part of your app to another part. This lectures shows you to use Subjects for exactly that purpose.

When subscribing to your own Subjects (or Observables), you have to make sure to unsubscribe() in time. This lecture dives into the details.

Let me give you some additional information about RxJS and Observables.

Do you want to learn more about RxJS and Observables? Check out this article/ the links in the article.

Let me wrap this module up and summarize what you learned in it.

Let me introduce you to this module and the topics we'll cover in it.

In order to send Http requests, we'll need the Angular Http service. Learn how to inject it in this lecture.

With the Http service injected, let's use it to send a GET request.

Do you want to pass data TO the server instead of fetching it? Have a look at this lecture!

The response you receive may not be in the format you need it to be. Learn how to easily transform it with Observables power in this lecture.

We got data, now we have to make sure our UI reflects that. Let's dive into this issue in this lecture.

What else can you do from this point on? Let's take a look in this lecture.

With the addition of our Http GET request, we introduced a bug into our app. Did you find it yet? Let's fix it together!

Let me wrap this module up and summarize what you learned.

Want to dive deeper? Have a look at this lecture!