Getting Started with Angular 2+

Angular 2+ is built with TypeScript and even though it isn't required, we're encouraged to use it when building our own apps. Let's take a brief look at what TypeScript is and why it's useful.

The Angular CLI makes it stupid easy to scaffold out an Angular 2+ project and to generate components, services, and many other pieces of our apps.

Let's dig into a few of the primary pieces that go into making an Angular 2+ app.

When it comes down to it, web apps are mostly just a mechanism for listing out data on a screen. To do this effectively, most single page app frameworks provide a mechanism to repeat over a collection of data within a single template. In this video we'll use Angular's NgFor directive to loop over our list of Cribs and then interpolate values in the dataset out to the screen.

We've got the cribs data on the screen, but so far it's just being listed out without much of a user interface. In this video, we'll display the data in card format and use some Angular features like structural directives and event bindings to make the template dynamic.

Right now we're rendering the crib cards in just one location, the main view of the app. But what happens if we wanted to reuse them in other spots later on? As it stands, we'd need to copy the HTML and any logic over to a new location, but this isn't ideal. Instead we should make a reusable display component so that we have an easier time with maintainability in the future.

If we don't know how our objects should be shaped, we can easily run into problems if we try to use a property that doesn't exist. We can make things easier for ourselves by implementing TypeScript interfaces. Interfaces allow us to say exactly which properties should be on an object which means we can be warned ahead of time if we try to do something that doesn't make sense.

For real world applications, getting data from a static TypeScript file just doesn't cut it. Most web applications need to get their data from a server of some kind, and for many scenarios, the best way to do that is to use Angular's Http class. In this video we'll introduce Http and make a request for our data from a local JSON file. We'll also move the Http call into a service so that it's reusable across the application.

Angular 2 provides a really powerful forms API which allows us to easily get values out of the form and to do things like validation. The first step in setting up the form is to build a template for it. Let's build a form template to let users submit new crib listings.

When we want to communicate between sister components via a service, we can make use of RxJS. One of the easiest ways to implement a communication bus is to use an RxJS Subject, which acts as both an observable and an observer.

We'll often want to be able to transform data on the fly. Perhaps the user wants to narrow their search results based on some criteria, or they want to rearrange the ordering of the data as it appears on the screen. For this, Angular gives us the concept of a 'Pipe'. Let's provide users a way to reorder their data by implementing a custom 'sortBy' pipe.

The application we built here gave us just a small taste of how to use Angular 2+. Let's talk about where to go from here!