All language subtitles for 1. Pipes Overview

In this video we're going to start working on our next application.

This next out there we're going to work on is gonna be very very small in nature because really just

going to try to play around with a feature inside of angular.

First off let's talk about what that feature is.

We're going to be working with pipes inside this application are really just functions that we call

and make use of inside of templates.

We call them in order to format some amount of information and then printed out inside of a template

so a pipe you can really imagine really picture as just being a very plain function usually only make

use of pipes inside of a template.

You can't technically make use of them outside of a template but that's not ever really going to happen.

Instead we only use them inside of a template.

Some pipes that we're going to use are built into angular and those are some that we're going to take

a look at directly.

You can find a partial list of the ones that are built into angular at this address right here we can

build our own pipes very easily.

So essentially really just comes down to writing out a function that is going to be used to format some

amount of data now.

Leslie on you mentioned here is that as we take a look at pipes if they a little bit weird or strange

or anything like that just keep in mind that you are not strictly required to use pipes and angular

like many other features.

They are optional but I think that once you see these pipe things you're going to say oh yeah that's

pretty handy.

I should probably use that pretty frequently.

OK.

So with all that in mind let's take a look at a quick mockup of the application we're going to build

to play around with pipes for a little bit and then start to generate our project.

All right.

So here's what we're going to build.

We're gonna make a little imaginary payment form.

User is going to enter in some payment information here on the left hand side.

Then as a user enters that information we're going to essentially duplicate that information over here

on the right.

But as we duplicate that information out we're going to format that data in a much better fashion.

For example I might be trying to pay some money to my cat named Scarlett.

I might enter lowercase Scarlett Greider.

I would then take that text and print it out with leading capital letters over here on the right.

Likewise I might might enter a payment date right here but I want to take that date and print it out

in a long form formatted very nicely.

Then finally I enter in some kind of payment amount I would want to take that amount and format it with

some currency symbol and a decimal as well so in putting this little application together we're going

to use three different pipes that are built into angular.

After we finish up with this app we're then going to take a look at a couple of other pipes and even

build one or two on our own.

Not really tied to this application but maybe we're going to do it inside this app but it's not really

going to be a part of this like payment form kind of thing OK.

So again this whole application here very small very simple it's only going to take us a couple of minutes

to put together really only building it just to play around with pipes for a little bit not with all

that mind.

Let's go back over to our terminal and get inside of a workspace directory inside of here I'm going

to generate a new project with energy new I'm going to call this simply pipes going to use the default

responses of no and C Ss and then as that generates I'm going to take a quick pause right here.

We'll come back the next video startup our project and start to play around with pipes.