**Understanding Pipes in Angular**

In this tutorial, we're going to explore one of the most powerful features in Angular: pipes. A pipe is a function that takes an input value and returns a transformed value. In this article, we'll create our first pipe from scratch.

We start by importing two things for our pipe: `@angular/core` and `PipeTransform`. The `PipeTransform` interface is what we implement to define the logic of our pipe. Our pipe is named `yesNo`, which makes sense given its purpose.

**Defining the Pipe**

Our pipe looks like this:

```typescript

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({

name: 'yesNo'

})

export class YesNoPipe implements PipeTransform {

transform(value: any): boolean {

if (value) {

return true;

} else {

return false;

}

}

}

```

In this code, we define a pipe named `yesNo` that takes an input value. If the value is truthy, it returns `true`. Otherwise, it returns `false`.

**Using the Pipe**

To use our pipe, we need to import it in another component. We do this by adding the following line to our `app.module.ts` file:

```typescript

import { YesNoPipe } from './yes-no.pipe';

@NgModule({

declarations: [AppComponent],

imports: [

BrowserModule,

FormsModule,

HttpClientModule,

// Add the pipe to the declarations array

YesNoPipe

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule {}

```

**Applying the Pipe**

Now that our pipe is imported, we can use it in another component. We'll create a simple form with input fields and display the result of our pipe.

Here's an example:

```typescript

import { Component } from '@angular/core';

import { YesNoPipe } from '../yes-no.pipe';

@Component({

selector: 'app-form',

template: `

Check

{{ result | yesNo }}

`,

})

export class FormComponent {

value = '';

result = '';

check() {

this.value = true;

}

}

```

In this code, we're using the `yesNo` pipe to transform the `value` input. The pipe returns a boolean value, which is then displayed on the screen.

**Pipe Transform**

But how does the pipe transform work? The `transform` function in our pipe takes an input value and returns a transformed value. When we call the pipe on a value, this function is executed.

In our example, when we set the `value` property to `true`, the `check()` method is called. This sets the `result` property to `true`, which triggers the pipe to transform the `value` input again. Since the `value` input is now `true`, the pipe returns `true`, which is displayed on the screen.

This process repeats until the component is destroyed or the value changes. The pipe continues to transform the input value based on its logic, producing a final output that's returned to the component.

"WEBVTTKind: captionsLanguage: enin this uh video we're gonna be talking about angular current version five point something uh if it's six or seven in the near future most of this stuff is backwards compatible you don't have to worry about any of that uh but we're gonna be talking about angular what it is what it does and then we're also gonna be introducing you to the important parts of it so what is angular right well angular is uh one of the one of basically two main javascript front-end frameworks there's react and there's angular angular referring to angular 2 and above right angularjs is typically angular 1. anyhow there's also vue which is another up and coming javascript library uh framework there's a bunch of javascript frameworks but there's really two main ones that are dominating the the market at this point in time that's angular and react we're going to be talking about angular 5 currently the current iteration oftentimes just referred to as angular so why use angular well the same reason use any framework you want to angular a framework is supposed to in theory allow you to write cleaner code that is more efficient at sometimes sometimes has better security and also already has some resources there to to make your life a little bit easier as well as make your code more readable so a framework will also gives us a lot of ability to manipulate the dom which is something in vanilla javascript it's a little bit harder than it needs to be and so that's really why front-end frameworks exist so that we can create code that is easy to read that has enhanced functionality that it involves quicker development that may allow us additional features as well as security and authentication and angular is uh pretty good at all that so uh what are we gonna be covering well we're gonna be covering uh angular's major parts angular any framework is massive in um in scope and you know um i just got done taking a 25 hour angular course not too long ago and we're gonna we're gonna cover in this one hour or so all the major parts that you absolutely have to know and that's going to be components those are our reusable parts those are reusable classes we're going to be covering module modules this is where we essentially create a list of all the parts that we want to use and inject it into things we're going to be covering services how do we do ajax calls and how do we share functions between multiple components between our reusable parts that's what services are for and then we're going to be talking about pipes how do we format and display data in the ui without actually um um without actually augmenting the data and that's what pipes are forming they're very helpful i found myself really creating uh pipes left and right now i absolutely love them and we're gonna be talking about routing how to um this is a i need to edit this but this is uh this is not that little bullet point isn't correct so uh how to actually showcase certain things in a route so we want to you know when our route changes angular and all these frameworks are called single page applications you never actually load the page but you do have you know routes where oh if my route is this please display this component please display this view please display this item to showcase and so we're going to show you how to do that in routing let's go ahead and dive right in all right there's some things that we're going to need to install before we get started when we want to develop an angular application uh one thing is you're gonna have to have text editor the one that i'll be using for this video and the one that i recommend just because i'm a big fan of it is visual studio code if you go to code.visualstudio.com download it install it you'll be good to go another thing that i'll be using is a git terminal and you can go to git dash scm.com to not only install git on your computer but also get the get bash terminal which you'll see in a second uh one other thing that you'll need to make sure you have installed is node as well if you go to nodejs.org en slash or just go to nodejs.org and i'm sure they'll have your language as well and you'll be able to down the latest you don't need to get the current you can just get the recommended one for most viewers um i'm not gonna walk you through how to install that it's pretty straightforward you download the file you keep keep clicking next and it's installed and last but not least we're going to install the angular cli what is the angular cli this is the angular command line interface and what this allows us to do is get a angular environment set up and running very quickly in a short amount of time and pretty much every time i start a new project i install the latest version of angular cli so if you want we can go ahead and walk it through this part just because i think it's a little bit more so uh although there's an instruction so i'm gonna launch my get bash terminal and if you have get installed at this point in time and then you right click you'll see get bash this will launch it just on the desktop we're going to install this globally which means that we're going to have access to it anywhere in our application and all we're going to do here is npm install dash g that's that global at angular slash cli uh there we go make that a little bit bigger for everybody and uh this will take just a second so uh if it's taking a minute don't don't sweat it all right so after you get done installing you'll see some some stuff like this everything will be good to go looks like at the time of this video the angular cli is in version 1.7.4 now what we need to do is wherever we're going to go and create our angular application in my case i have a tl dr folder that i'm going to go to you're going to go to that folder um tldr and launch your get bash there we're going to be using this command here ng new and this is going to allow us to create a new angular application and all we have to do is then name our app and i'm going to just go ahead and call it tl dr um angular and this is going to the angular cli is going to automatically create a working angular environment for us to get started with it's gonna be pretty pretty straightforward uh we'll walk through a little bit more of what's inside the application when this when this gets done installing and what you need to know about it uh when we get up and running here all right so let's go ahead and open our text editor of choice again i'm using the visual studio code and what we're going to do is we're going to go ahead and open that file that just got created this folder that just got created and we're gonna see a ton of crap in here and um a lot of it we're not gonna worry about but i'm gonna give you a quick rundown of what's going on here so you'll see this tslint ts config this is going to be to give us some styling suggestions as well as you know angular is written in typescript we're not going to talk too much about typescript in this application i'll have a separate tl dr video i can i'll be doing on typescript and then you know we have our readme file for some information about how to run our application and then we have our angular cli.json this is some of the setup here so um if you need to import a global style sheet or anything like that you can do that here if you need to import a global scripts tag you can do that here as well you can see the name of our application as well and then uh when we these are our node modules all the installs that come along with angular and some end-to-end testing so um a couple more things let's see uh so this is our global style sheet the styles.css so if we want to apply styles globally to our angular application we could do it here and you don't need to worry about that and then at index.html you'll see we have this app root this is our index.html is exactly what you would expect we have a title here for our main home page and then our app root allows us to um elect this is what's injecting the at some point we have to inject our components into here so that's what's going on here don't worry too much about that for the time being and then assets don't need to worry about that then app okay um i could have spent a lot more time you know talking about this but really all this sort of stuff isn't important we have our package json where this has our installs at the time of this video it's apparently installing 5.2 0.9 specifically of things in angular just for that so you know and our dependencies and all that sort of stuff let's go ahead and talk a little bit about a component and actually get this up and running so we could see what comes by default with the angular cli project all right so let's go ahead and launch the angular the default angular project which we've made no changes to quite yet you'll notice that i'm actually now in the folder the set the root folder tl dr angular that we created all we have to do here is put ng serve and what this is going to do is it's going to launch our development server angular the angular cli creates a nice little project for us where by default if we go to localhost 4200 we'll go here we have a wonderful little environment this is what it's going to look like by default when we get started with an angular project it has some links to the cli documentation the angular blog etc etc and then a tours of heroes example now one thing to keep in mind is the development server is really great so that if we made a change to our application like so and we wanted to change welcome to app for instance uh to welcome you know hello to app and we saved it the angular cli project that set up automatically refreshes it so that you know we don't have to go and click refresh every time we save and make a change in our application it's going to do that for us all right so what we're going to be doing for our application is we're going to be building a survey form then we're going to have some services connected to it but that's going to cover everything that i want us to talk about so before we move forward let's actually gut out this html file you'll see here that this is just the stuff that we already looked at this isn't going to be helpful to us we're going to cut that out but let's talk about how each one of these components you'll see this component keyword this basically lets us know what this is right and there's a definite file file name convention that goes along with this but this dot html that's going to be our view the dot css that's of course going to be our style sheets one thing to keep in mind with angular style sheets by default if we have a css folder or a style sheet in our component level like this it's actually going to only apply even if we create a name an id it's only going to apply it directly to the component here it's it's the styles for this specific component you'll notice the spec.ts file we don't need to worry anything about this right now all this is is some karma and jasmine unit testing i'll have a separate tldr video going over specifically karma and jasmine and how to get going if you're interested in testing specifically with angular i have uh my part two course we write a ton of tests we're building a cryptocurrency um front-end application using a cryptocurrency api and uh it dives deep into that uh if you're really interested in that so uh then we have our app component and app module we'll come back to app module in just a second but this app component now remember i told you this is how we build our reusable parts you'll see that we're at importing component from at angular core all we're doing here is importing this dependency all right so let's talk about this decorator here and what this basically is this at component so you'll see that we have a selector a template url and a style url when you're defining a component there's three main pieces the selector remember in our index.html where we um where are you index.html where we have this app root this is our selector so the selector allows us to inject the other components into a template into a view and then use it and render it the template url here is the html content that's in there and now remember we're going to be connecting the the component logic to the template but you know in our case we could we had just the angular hello you know welcome to angular and the three links right we deleted all that and got rid of that the styles url this is an array you can have multiple style sheets in here if you want but this allows us to have custom css for our component all right so before moving on let's talk a little bit about modules what they are and what they do modules give us the ability to at the end of the day allow us to import a group of items and install them into our application basically say hey declarations are going to take in your components imports are going to take in other modules that are going to be used and then providers are going to take in services and bootstrap uh are components that will be automatically added when this all launches and runs don't worry really worry about these three main ones here are the ones you have to worry about for the extent of this video and just get up and running so declarations you have components imports you add modules providers you add services we don't have any services yet but modules at the end they really are just a way to add dependencies to your application whether they're external or internal that you've created to your angular application the reason you might use modules is not only to organize your code better but also to um sometimes as applications get more and more complex you may only want to load a third of your code unless they get to the a certain route in your code and then you'll load the other two thirds and so your application will run a little bit faster things like that so that's that's modules and as we go and create components we'll be jumping back in here to add some stuff so let's get started by creating by in our first app component here we're gonna go ahead and um create a heading and a title and we'll get started creating our survey form one more thing before we get started i'm gonna actually install bootstrap this is just gonna be for some styling and css you don't really have to worry about it too much more than that so to do that all we have to do is make sure you're in the your root directory and then go npm install bootstrap and this will take just a second to install all right after it goes ahead and installs you'll see something like this bootstrap's currently in version 4.0 right now and uh what we have to do next we just have to add the dependency even though it's added to our application we have to add it to either one of two places the angular cli json we could add to the styles here i personally like to instead just use an import statement in our global styles say at import and then uh this tilde will essentially hit the root of the known modules and then we'll say bootstrap slash dist slash css slash boot strap dot min dot css it's going to give us access to bootstrap to use as we're building out our components now all right so our survey form is going to be about cryptocurrencies um mainly because i already have some cryptocurrency apis i'm familiar with um you don't have to know anything about cryptocurrencies for this tutorial so what we're going to be doing here is we're just going to start off by creating a little container uh this is just some bootstrap and if you're curious how i shorthanded this built into visual studio code basically has a emmet plugin in the background which allows us to type div and then classes like so with the dot or the hashtag for id and hit tab and then it will allow us to uh when we hit tab it's going to create that for us so we're going to go ahead and create this uh div container class then we're going to create a h1 here we just put a crypto survey in it go ahead and save it all right and then of course we need to uh restart our server which we haven't done yet so let's just go ahead and do ng serve real quick that's going to launch as well all right it's back up all right rather than switching between screens and all that sort of stuff i'm just going to put the screen in the bottom left corner and every once in a while i might pull it in for major milestones of the video like towards the end uh so um you'll see here we have our crypto survey it's h1 if we wanted to we could add class text center just to center it make it look a little nice so nothing crazy so far now what we want to do here is we're going to ask we're going to have three parts three inputs uh maybe a name a um a a a drop down like an input a drop down and then a comment so three inputs but i actually want to create a new component to do that so and then also include uh views for the first to start off what we're going to do is we're just going to create the component we're using the angular cli all right so to get to any other cli to generate a component for you all we have to do is ng generate component and then the name of the component in our case um we're going to call it crypto dash form and this will automatically create the component for us uh wham bam go ahead and lower this jump back into our application and you'll see we have this crypto form component now that has been generated in our application so what gets generated with it well we get a css file we get a html file it's just going to have some text in here so that you can see that it displays we're going to get this testing file and we're going to get our natural component here uh that basically everything said about uh with the constructor and ng on in it we'll talk a little bit about what that is and how we're gonna use that uh moving forward so uh one other thing that happens in our app module you'll see here we it automatically will take import our crypto form component and add it to our declarations using the angular cli so we don't have to worry about that if we're using the angular cli but now that we have our component created how do we add a component to another application well it's pretty straightforward right we saw how we did with app component so uh how would crypto form component well do it well let's look at our selector here we have app dash crypto dash form go ahead and uh copy that and we go ahead and jump right into our appcomponent.html put that hit hit tab save it and we should see the text that was in there and we do where it says crypto form works right or you see that there's something there very small if you're watching this on mobile all right very nice let's go ahead and delete that and now we're just going to create our form real quick uh so we'll do a div uh we'll make it a row and then we'll create a uh div call excuse me um um i'm sick why filming this so i apologize if i'm sneezing um so we'll go ahead and create a md-6 we'll put a label in here this will be with like font dash weight dash bold to make the label there and um this will be for oh what was this uh we'll do name and then in here we'll have our name and then we'll have an input this is going to have a class of form control all this stuff is basically just basic html and a little bit of bootstrap so it looks nice and uh we're gonna give this an id equal to name so when we click on the label it goes in there and um we'll go ahead and create another we'll save that real quick so that should give us a little label and a little form control uh nice uh let's click name go in there cool let's go ahead and create another div real quick and then we'll uh this will be uh div dot call dash md six another uh label dot um font dash weight uh we'll call this for uh this is gonna be a drop down of some cryptocurrencies and we'll just call this cryptos and we'll say favorite crypto and then we're going to create a drop down uh so we have our select tag and uh this will be we can get rid of name here we don't need that but we do need id here for cryptos and then we're gonna go ahead and create an option and we're gonna iterate through that in just a second so uh one more thing that we need to create for html let's spread that out a little oops let's spread that out a little bit so it looks all right and of course i'm meant to add class here equal to form dash control this will just make it look nicer all right and uh while we're at it we don't need to have this in its own row we'll just have a text input div dot uh row div dot call dash md-12 and we can just go ahead and put a label dot font dash weight dash bold this will be for comments and then we'll say comments and then we'll have a text area font dash weight dash bold all right uh delete all this other crap all right cool so basically we just did a little bit of bootstrap a little bit of oh this is a form control extrusion so form dash control a little bit of misspelling so we basically created a little bit of html here looks clean it's nothing nothing super crazy and then um let's go ahead and create a button uh we'll just do um div dot row in here we'll have a um hey we're just making it uh it doesn't matter we'll make it a button and we'll say uh dot um vtn dot btn dash outline dash success uh oh and also let's make it let's just make a block level button and then here we'll just say um um send form something like that all right uh oh it's not gonna look right if we don't do this this will do it so everything's on the same page all right cool uh and maybe we'll add a little bit of padding to the top or margins at the top so mt-2 just a bootstrap margin uh class very nice all right cool so uh pretty basic so uh we've created our component we're not using routes yet we're not going to worry about that but let's actually and we haven't done any logic in our component yet we'll come back to that in a second but let's go ahead and actually create a service because we want to populate this drop down here with a list of cryptocurrencies so how do we go and create a service all right before we move forward let's look at the the endpoint that we're going to be getting our data from we'll be getting it from https colon slash slash api dot coin market cap dot com slash v1 ticker and um if you don't have uh a json uh i have an extension called the um json formatter you can just google type chrome extension json formatter it'll come parse like this um and so i highly this is just straight up text but sometimes they'll come back as one long string so you can't collapse it i really like this plugin it's a great one but basically what we're going to do is we're just going to go ahead and pass in this name property uh from the object but first we have to get the service so that we we can actually do the ajax calls let's go ahead and create our service we're going to create it just like how we did our component if you remember earlier where we can do ng generate service and what are we going to call it well in this case i think we're just going to call it our crypto service wham bam cool uh so you'll see that we have created a crypto service it added here now we're not going to be talking too much about good file structure and folder structures there's just no time but um typically i would have my own i would have a uh every one of my components would have their own folder and a services would have its own folder model would have its own folder pipes would have its own folder so on and so forth but for the sake of this video in time we're just going to go ahead and not worry about that so you'll notice that when we create a service a couple things happen one it creates a test a test application here for us to test the service we're not going to worry about that again and then it creates our service you'll notice here that we have this at injectable this allows us to create a service at the end of the day similar how we have to pass in the the metadata with the at component the at injectable is for uh services uh that's going on here and you always also notice that now oh it didn't add it that's very i thought it was gonna add it so we have to add the crypto service in order for us to use it in other applications here um to the application so we're gonna import uh what did we what did it end up being crypto service service if that isn't a bad name i don't know what is so let's go ahead and just drop off that last service real quick uh crypto service uh i probably should have named the virtual service so from what are we going to name it right here just pass that in cool so now that we have it imported we have to add it to our ng model though uh importing it here without adding it to the ng model does nothing services get added to the providers now our applications will have access to our service so how do we make an ajax call from our service though because that's our that's our end goal right that's what we're trying to accomplish okay so as of angular 5 the http um module slightly changed and so uh we're going to import in our service the http client and that's going to be from at angular slash common slash http now one thing to be able to use this is we actually have to import the http module in our app module here so that we have access to this essentially all right so in our component in our excuse me in our module we're going to import the http client module from uh the same place that we just did a moment ago for http client now this is going to be at angular slash common slash http and then uh now that we've imported it we have to go to our imports here and just let it know that we plan on using it and adding it to our imports so now that we've done that we'll have the ability to actually use the http client now when you're doing a service in the constructor if you're a constructor basically all it really all you really need to know about this if you're not familiar with more object-oriented programming is a constructor essentially when we create our crypto service these are the properties that get created along with it that it that uh or these are the the dependencies that get added to it and so we're going to create that dependency and we'll just create uh we can just put http we're not going to put anything as public or private because i don't want this to confuse anybody so http of type http client now that we've done that whenever you actually go and use the crypto service we'll have the ability to go and um and use the http client module so how do we go about actually doing an ajax call it's pretty straightforward we're going to create a function uh in here called um get cryptos and all we want to do here is return this dot http dot get and then remember that route i was just telling you about a second ago we're gonna take this route and we're gonna pass this in like so and then we're going to say uh what's the issues giving us here http doesn't exist on type crypto service yes it does i think this is just um a little bit of the uh module issue here sometimes when you add new modules without restarting your server you get some some little warnings we'll worry about fixing those warnings later on so what we're going to return here is what's called an observable default it returns a promise so the way that we convert our promise to a observable is we just use the concat map and what we're going to get back from here is a response let me go ahead and wrap that and what we want to do is take that response and we want to take that response and we want to return it back as an observable in json form so now that we've done that this will allow us um did i spell crypto wrong c-r-y yes okay kryptos there we go um to subscribe to that observable in our component and then get that data let's go ahead and see what that's going to look like all right so how do we add this service to our component well exactly how we added http to our service is now when we jump into our crypto form component.ts in our constructor and we um we are going to first we have to import that service so we're going to import the crypto service from uh dot dot slash crypto service and then we're going to add it as a dependency and in our case we're just going to call it crypto service and then uh of type cryptoservice now by default we want it to actually fire off and that's what this ng on init is essentially when the component loads it will then fire off whatever code is within here on init comes from at angular core and you can just put implement on it as well as this function name ng on init to make sure that the code gets fired off so all we're going to do is say this dot crypto service dot get oh and of course make sure you spell crypto service or your intellisense will not work dot get cryptos what is going on here no i spelt it right okay cool dot get kryptos and then what we want to do is we want to subscribe to those cryptos and this is going to pass back some data and all we want to do here good time being just make sure we set everything up just want to go ahead and console.log that data save it and everything should work although this is giving me an error all right so it looks like it's having some issues detecting our our dependencies what we're going to do is we're actually going to close our server and then we're going to rebuild it the reason for this is sometimes when you add new add new dependencies to modules create new components it angular sometimes doesn't know they exist and i think that's what's happening here so http does not exist on crypto service okay so my mistake here is uh we have to actually jump back in here and put this public property on apparently for dependencies and this will allow us to essentially have access oops to our crypto service within it otherwise i think it's assuming it's private or it's assuming that it's it's so i didn't want to do any public or private uh aspects of our application here but it seems when we do dependency injection we have to actually add that and so let's jump back into crypto service and do the same thing public in this case really only means that hey uh other applications can use it even the user can call this if they want to and so now we'll have access to our application and concat map and i also made a little mistake here um concat map you don't have to do this in the application anymore you used to have to in the old one but what we'll have here is just this get call go clean up the code a little bit no big deal and then jump back into our crypto form component which now you'll notice and i'll go ahead and pull this down for this you'll notice in the chat here we get our 100 cryptos and we have access to the whole thing uh that's because the reason for that concat map is when we made the change uh from angular http to angular common http they they um convert it from promise to observable for you and so that's that's why we're doing that we no longer have to do that so that's why that function doesn't exist all right the next thing that we're going to do is we have to actually store this data right it does no good for us to use it in our template if we can't store it and iterate through it so what we're going to do is we're just create a variable here and we're just going to call this um cryptoarray and uh what this is is is a property of our component and cryptoarray is probably a really bad name so let's instead call this top 100 cryptos and um we'll just initialize it here and then in our data instead of just console logging it we'll say this top 100 cryptos is equal to the data in a production level application we would have some models and we'd be creating some classes and maybe an interface we're not worried about that right now we're just trying to get the basics down so we create this property and this top 100 cryptos now that we have this well we can actually use it in our application so let's jump into our crypto form component and what we want the whole reason we set that up was for this drop down to actually populate with values and the way that we can iterate through an array is we can use this structural directive here called ng4 which will let us do that and all we have to do is say we'll say let crypto now that is our element that we're going to be iterating through of top 100 cryptos that's our array and then using stringer interpolation with these curly braces we just say crypto dot name that dot name of course comes from the the application that the uh that we were looking at and you'll see here we have our 100 cryptos in order of i believe market share um and while we're at it let's just have add an option here so that it's not going to select the very first value but now we've set up our service with a with ajax called do a git call everything's working well save that and bam so we have access to the top 100 cryptos very cool but how do we actually store the data and pass data and you know how do we how do we do that well we're going to use a something called ng model so ng model allows us to create essentially uh place a two-way binding so that we can change a value in the controller in our component and we can change values in our template or our our view here and so do that let's go ahead and jump into our form component and we'll just define an object real quick and um we'll just call this crypto survey and this is going to be equal to an object and we're going to say name and by default we'll set it to an empty string and again you'd probably be doing this in class and then we'll say um favorite crypto that we'll set that to an empty string and then uh we'll do comments and we'll set that to an empty string so we have uh another property like we have with our top 100 cryptos from earlier but now we want to be able to target this directly and change the values so how do we how do we modify our html to do that well on our input here we can use a ng model and assign it and what we're going to assign it to is essentially exactly that uh which i forgot what the hell the name i just defined it was uh crypto survey what an appropriate name dot name so we're going to save that and you see we get this big scary wall of text why did we get that well uh one because i first forgot to put name but we should get i believe we should get another wall of text okay now we get a less scary but still scary uh well attached can't buy the ng model since this is a known property of input all that means is that we actually have to jump into our app module and we have to import the forms module right so they're assuming that you're doing some sort of form if you're using angie model you're probably working with forms and they want you to go ahead and import the forms module and add it to your application and that's going to be from at angular forms very cool take our forms module throw it in there save it and that should solve our issue moving forward and now we can go ahead and and everything works and you'll notice that if we wanted for instance to set name by default to dillon we could change it in our application and you'll see it loads with dylan and if we were to change this uh it would affect this as well and one way that we'll we'll show that is when we do our submission so let's go ahead and delete that and we'll just go and add ng models to the rest of the application like so so uh added on the select and i called that what did i call that favorite crypto and gonna copy that one more time and then comments i can remember comments where are you text area all right comments cool so uh now we've added uh we've now connected in both directions our application here um but where does this we want this form to send us somewhere right um really what we want this to do is we wanted to do a cl we want when we click this to have it call and send some data somewhere in our case we're not going to send anywhere we're just going to pretend like we are but how would we do that well we can add this click event here that then calls a function that's called send form and does some stuff in our case we're going to go ahead and create a function called send form and all it's going to do is console.log top 100 cryptos cool and we can see that just the two-way binding is working just fine so now it's like that we go ahead and put dylan remember everything's starting off empty we'll do bitcoin and we'll do like okay then uh i don't know what to put in the send form and cool when we send the form oh i didn't mean top 100 cryptos i meant crypto survey excuse me uh but you did see that it logged out the top 100 cryptos but that wasn't what i was going for so dylan bitcoin send form and you'll see in our application now that we've actually modified the way that this is going to look favorite crypto name uh oh look we have a bug in our code favorite crypto did not set its value the reason for it is we didn't set our drop down uh value which is why you do these checks which is pretty straightforward this is just some html really at the end of the day and all we have to do here is jump back to our option instead of every value being that all we want value to be and we'll just wrap this when we wrap this like this what this essentially is doing is now doing property binding where essentially if we wanted to pass in a boolean that would be like that and not it wouldn't be the string true and it's the same thing for crypto dot name this will allow the name to be put in there not specifically the string crypto.name and then you'll see now we go ahead and put something here go ahead and put something here select bitcoin submit our form and bam now we have bitcoin in there as we wanted before all right so next what we're going to do is we're going to go ahead and create routing and see how we can set up our routes in angular this is a you know pretty common property of earth item topic in single page applications is a single page because we essentially create these mock routes where we only display certain things if our route or our url here is in fact a certain path uh we're not actually reloading the page we're just changing what's in our view and so what's going to happen is from name favorite crypto comments and sun form when we click the send form we want it to then go and change the route we're still going to have our crypto survey heading there because our router outlet we're going to add this as our as our router as our route as our view that changes based on what our route is so how do we do that well uh first thing we're going to do real quick is go ahead and create a new component go ahead and go to your like so i should have had this open my apologies tldr tldr dash angular get bash and uh ng generate component and in our case we're going to just call it form dash submitted and that's going to generate a new component for our application cool here's our component has all the same stuff that we already talked about um we're not going to worry too much about that right now instead what we're going to do is we're going to comment out this app crypto farm form and you'll notice that it it goes away right as we would expect right because we don't have that anymore so what do we want to do well we need to do some setup well if you haven't noticed by now angular works off a lot of different dependencies and it has this setup a lot of you know these ng modules allow us to set up and say what dependencies we're going to use and what part of the library want to use well we're going to want to import the router module so that we can actually use the routes at angular slash router like so all right up next what we're going to do is we're going to go ahead and create some route here i'm just going to create a constant variable called routes and we're going to set this equal to an array of objects these are really just going to be our routes that we're going to apply uh in in a second so you'll see here we're gonna have an object there's gonna be a path which is a string an empty string is gonna be our default path right our homepage if you will and then we're gonna have this component which is going to take in what we what component we want in our router outlet which is essentially a tag this is where we want to inject our view where we want that to be so in our case we have our crypto form component we just defined so we're going to say look when we're on the home page to find to find this there and when we're on this other route in our case we're just going to call it submitted uh we want the component to be our form submitted component i apologize for the bad naming convention i'm kind of making up this tutorial as we go along uh but we can talk about clean code in a separate video and uh good naming conventions and things like that so we have form submitted component now the way that we add our routes and able to use it well as we all know we have to add our module to imports and then we're going to have this dot for roots for root here and if you see then we're going to pass in our routes so this for root essentially adds our application on the root level all you have to really know is this is a setup to do roots that's really all you have to know um for what we're trying to get going and or for routes not for roots and so now that we've done that the one last thing that we have to do is instead we just have to create our router dash outlet tag and save it like so and you'll notice that our app crypto form component is now here and we can go ahead and delete this comment right because we are on the index page and if we go anywhere else you know it's not going to know what is what that is and we're going to get in here there's a couple different ways that we can solve this uh one we create a 404 component but we don't need to worry about that right now that's beyond the scope of this course but in our remember we created another route which is just submitted and now you can see our form submitted works our form submitted component is there and we're dynamically changing the routes so that it it goes and uh works accordingly so how do we uh how do we just link to this and um pass how do we create our routes uh to go and send to it well it's just an anchor tag at the end of the day really so if we go to our crypto form component we can go to right here we're not going to do anything with this send form component um we'll just create a router link on our crypto form template and we'll just say router link and what do we want it to equal in this case we just want it equal to submitted and bam it jumps between everything we want we can throw this router link on anything that can be clicked essentially router link can also take in an array of values so if you're going to have different values now this would work exactly the same just something to keep in mind so if we click send form it's going to work the same that way if you have parameters or ids or you have multiple things you can concatenate that but um it can take in a string or it can take in an array all right while we're at it let's just go into our form uh component and just add some text that makes sense something like um you know we'll just make this an h1 we'll make this like an h3 and we'll add the text center class and we'll just put some something like thank you thank you for your input exclamation point we're not going to really worry about too much of uh making this app look too good but that's that's that's one thing that i can that we can do to get started all right so let's jump back into our crypto form component and we're going to jump into the html we're going to just first off we're going to display what a pipe is one of the common pipes that you can use and so a pipe just as a reminder something that you are going to use to edit data or to to essentially filter how you see data and what it what it looks like and a good example that is the date pipe so let's create um a variable here we'll just call it today's date and we'll set this equal to a new date oops new date there we go and we'll jump into our crypto forum component and just right at um you know let's jump back here real quick and then we'll create a new div here and in here i'll have a just put a little h h5 that is um today's date again we're not trying to make this look the best it's mainly about illustrating an idea so today's date data oh my goodness today's date there we go all right cool so this very long string uh eastern daylight time all that that's not very good what we can use though is some built-in pipes in angular to actually go and filter this so that we can get in the form we want without having to manually change it so the date pipe uh we're looking at that documentation right now you can see that it comes with several formats that you can use as an example short is equivalent to month day year year hour minute minute and then time zone all that sort of stuff um and then you have these are all predefined but you can see there's a lot of different examples and uh it goes on and on and there's a lot of documentation some other pipes in here to keep in mind they have the number pipe which is allows us to um you know do decimal places on our numbers there is the to lowercase and to uppercase pipe um all all that sort of stuff there's also the slice pipe um there any others bunch of pipes and you can write your own uh we'll go ahead and showcase how to write our own real quick after we use the date pipe so we should i believe we already have the common module imported here but all we need to do to use the datepipe you'll notice we're using these and primarily in our html so if we parse by date you'll see we get the default one but now we get this very nice added very nicely filtered default value now if we wanted to do our own custom one we have this colon that comes so the pipe as you might imagine is denoted by this pipe and if we wanted to add uh custom ones we could do it with a colon and this essentially tells us hey we're about to add in an optional parameter to our pipe here like so and we could pass it short remember we had the short we could also pass in i believe mm is month month minute or what is that minute that might be minute yeah this minute i think mm is month which is the fourth month um for our useful just passing short but that's how you pass in optional parameters now let's go ahead and create our own custom pipe all right we're gonna make a very simple pipe what we're gonna do real quick is just create a drop down here that has a boolean value of true or boolean value of false say hey do you like crypto or do you believe in crypto so we'll just do uh create a little div real quick make that a row a little div dot call dash md-12 and a label dot font dash weight dash bold and uh love crypto something like that and we'll just ask a question it'll be true or false do you love crypto and uh ideally you probably wouldn't use a a um select tag for this but we're going to uh select love crypto and then in here we'll have option uh value true and then we'll have um true here for now and then we'll also have option um false and i'll have false here for now as well and what we're going to do is we're going to write a simple pipe that says if it's a true value if it's if the value is true go ahead and change it to yes output is yes if the value is false go ahead and output it to false all right so let's start by creating a new pipe how do we create a product at this point you probably guess ng generate pipe and we're just going to call this bull uh bull yes actually let's call it yes yes no and it's going to create a new pipe for us jump into back into our component for submitted and then you'll see we have our test file and then we have our actual pipe all right so let's go over what's going on in our pipe here so you'll see we're importing two things for our pipe we have pipe pipe transform this is our decorator and uh remember how we did slash date that's what this name is for in our case it's going to be yes no and then of course we're exporting uh yes no pipe and we're implementing pipe transform what is the transform property coming from pipe all that is is essentially our logic hey when we call this pipe on a value what do we do with it and so uh here we can go ahead and take uh get rid of all this sort of stuff uh not trying to introduce any type script as much as we can in this in this introduction video so what we want to happen here is say hey if value meaning if it's true return yes else we don't need else right because it's a return statement uh it's not going to hit this unless the sales else go ahead and return no and so now we've essentially written our first pipe let's go ahead and save this other file and excuse me for having that up and what we're going to need to do now is we're going to actually need to import that pipe in our module so that we can use it elsewhere all right let's go ahead and fix our we just have this very nasty little input here and so let's go ahead and uh fix that by just adding this uh class form control which is again it's just a bootstrap class form dash control which will just make it a little bit more pretty cool so what we need to do is jump into our app module and import that pipe oh look it's already been imported for us you'll notice that pipes go in declarations as well just as components do let's go ahead and close some of this and so what we can do here is we'll just do some string input interpolation we'll put the string true here and then we'll pipe it with yes no and then we'll do the same thing with false so bam so you'll see our values here are actually oh excuse me so the reason that this is returning yes and yes it's not because our pipe is flawed because i made a mistake here so remember we're expecting a boolean value and when they're strings they are going to always be true because it's going to be um so you'll see yes and no uh and the value here is true and false and so that's a very basic pipe pipes are really powerful i i write i use a pipe um that i just call the keys pipe which essentially if i have an object i don't know what the names and the keys are going to be i'll do the keys and i can have access to all the values in it and it's really dynamic in that way something i use quite frequently so uh when you're creating pipes and you're really wait how how you want to think about pipes is when you're creating something that's going to affect how it gets rendered in the ui you might want to think about using a pipe rather than writing some custom logic in the component and that way you can reuse it in the other other components as well all right so i think we're going to stop there for this quick rundown of angular there's a lot of other things we can talk about in angular animations we could talk about um um sending um data from one component to another and from a parent to a child child to a parent we can talk about how to you know inject services and other services so we can talk about testing there's it the list can go on and on angular's very very long so if you're interested in diving a little bit more deeper deeper in it i have two angular projects uh part one is a introduction projects about three and a half hours of content where we're going to be building a personal portfolio we're going to introduce it to a lot new concepts as well expand on what we have and then part two is a cryptocurrency project where uh it's about eight hours of content or six hours of content i forget what it is it's a it's about twice the size of the original project and uh this goes into even more advanced details so if you enjoyed this i appreciate you guys watching the video don't forget to comment like subscribe sure i hope it gave you maybe a little bit of a head start a jump start to get going with angular 5 and angular thank you for watching the video don't forget comments milo i'm trying to do an outro here uh comment like subscribe share support me on patreon hit that notification bell all that good stuff um i'll see you in milo we'll see you next time bye guysin this uh video we're gonna be talking about angular current version five point something uh if it's six or seven in the near future most of this stuff is backwards compatible you don't have to worry about any of that uh but we're gonna be talking about angular what it is what it does and then we're also gonna be introducing you to the important parts of it so what is angular right well angular is uh one of the one of basically two main javascript front-end frameworks there's react and there's angular angular referring to angular 2 and above right angularjs is typically angular 1. anyhow there's also vue which is another up and coming javascript library uh framework there's a bunch of javascript frameworks but there's really two main ones that are dominating the the market at this point in time that's angular and react we're going to be talking about angular 5 currently the current iteration oftentimes just referred to as angular so why use angular well the same reason use any framework you want to angular a framework is supposed to in theory allow you to write cleaner code that is more efficient at sometimes sometimes has better security and also already has some resources there to to make your life a little bit easier as well as make your code more readable so a framework will also gives us a lot of ability to manipulate the dom which is something in vanilla javascript it's a little bit harder than it needs to be and so that's really why front-end frameworks exist so that we can create code that is easy to read that has enhanced functionality that it involves quicker development that may allow us additional features as well as security and authentication and angular is uh pretty good at all that so uh what are we gonna be covering well we're gonna be covering uh angular's major parts angular any framework is massive in um in scope and you know um i just got done taking a 25 hour angular course not too long ago and we're gonna we're gonna cover in this one hour or so all the major parts that you absolutely have to know and that's going to be components those are our reusable parts those are reusable classes we're going to be covering module modules this is where we essentially create a list of all the parts that we want to use and inject it into things we're going to be covering services how do we do ajax calls and how do we share functions between multiple components between our reusable parts that's what services are for and then we're going to be talking about pipes how do we format and display data in the ui without actually um um without actually augmenting the data and that's what pipes are forming they're very helpful i found myself really creating uh pipes left and right now i absolutely love them and we're gonna be talking about routing how to um this is a i need to edit this but this is uh this is not that little bullet point isn't correct so uh how to actually showcase certain things in a route so we want to you know when our route changes angular and all these frameworks are called single page applications you never actually load the page but you do have you know routes where oh if my route is this please display this component please display this view please display this item to showcase and so we're going to show you how to do that in routing let's go ahead and dive right in all right there's some things that we're going to need to install before we get started when we want to develop an angular application uh one thing is you're gonna have to have text editor the one that i'll be using for this video and the one that i recommend just because i'm a big fan of it is visual studio code if you go to code.visualstudio.com download it install it you'll be good to go another thing that i'll be using is a git terminal and you can go to git dash scm.com to not only install git on your computer but also get the get bash terminal which you'll see in a second uh one other thing that you'll need to make sure you have installed is node as well if you go to nodejs.org en slash or just go to nodejs.org and i'm sure they'll have your language as well and you'll be able to down the latest you don't need to get the current you can just get the recommended one for most viewers um i'm not gonna walk you through how to install that it's pretty straightforward you download the file you keep keep clicking next and it's installed and last but not least we're going to install the angular cli what is the angular cli this is the angular command line interface and what this allows us to do is get a angular environment set up and running very quickly in a short amount of time and pretty much every time i start a new project i install the latest version of angular cli so if you want we can go ahead and walk it through this part just because i think it's a little bit more so uh although there's an instruction so i'm gonna launch my get bash terminal and if you have get installed at this point in time and then you right click you'll see get bash this will launch it just on the desktop we're going to install this globally which means that we're going to have access to it anywhere in our application and all we're going to do here is npm install dash g that's that global at angular slash cli uh there we go make that a little bit bigger for everybody and uh this will take just a second so uh if it's taking a minute don't don't sweat it all right so after you get done installing you'll see some some stuff like this everything will be good to go looks like at the time of this video the angular cli is in version 1.7.4 now what we need to do is wherever we're going to go and create our angular application in my case i have a tl dr folder that i'm going to go to you're going to go to that folder um tldr and launch your get bash there we're going to be using this command here ng new and this is going to allow us to create a new angular application and all we have to do is then name our app and i'm going to just go ahead and call it tl dr um angular and this is going to the angular cli is going to automatically create a working angular environment for us to get started with it's gonna be pretty pretty straightforward uh we'll walk through a little bit more of what's inside the application when this when this gets done installing and what you need to know about it uh when we get up and running here all right so let's go ahead and open our text editor of choice again i'm using the visual studio code and what we're going to do is we're going to go ahead and open that file that just got created this folder that just got created and we're gonna see a ton of crap in here and um a lot of it we're not gonna worry about but i'm gonna give you a quick rundown of what's going on here so you'll see this tslint ts config this is going to be to give us some styling suggestions as well as you know angular is written in typescript we're not going to talk too much about typescript in this application i'll have a separate tl dr video i can i'll be doing on typescript and then you know we have our readme file for some information about how to run our application and then we have our angular cli.json this is some of the setup here so um if you need to import a global style sheet or anything like that you can do that here if you need to import a global scripts tag you can do that here as well you can see the name of our application as well and then uh when we these are our node modules all the installs that come along with angular and some end-to-end testing so um a couple more things let's see uh so this is our global style sheet the styles.css so if we want to apply styles globally to our angular application we could do it here and you don't need to worry about that and then at index.html you'll see we have this app root this is our index.html is exactly what you would expect we have a title here for our main home page and then our app root allows us to um elect this is what's injecting the at some point we have to inject our components into here so that's what's going on here don't worry too much about that for the time being and then assets don't need to worry about that then app okay um i could have spent a lot more time you know talking about this but really all this sort of stuff isn't important we have our package json where this has our installs at the time of this video it's apparently installing 5.2 0.9 specifically of things in angular just for that so you know and our dependencies and all that sort of stuff let's go ahead and talk a little bit about a component and actually get this up and running so we could see what comes by default with the angular cli project all right so let's go ahead and launch the angular the default angular project which we've made no changes to quite yet you'll notice that i'm actually now in the folder the set the root folder tl dr angular that we created all we have to do here is put ng serve and what this is going to do is it's going to launch our development server angular the angular cli creates a nice little project for us where by default if we go to localhost 4200 we'll go here we have a wonderful little environment this is what it's going to look like by default when we get started with an angular project it has some links to the cli documentation the angular blog etc etc and then a tours of heroes example now one thing to keep in mind is the development server is really great so that if we made a change to our application like so and we wanted to change welcome to app for instance uh to welcome you know hello to app and we saved it the angular cli project that set up automatically refreshes it so that you know we don't have to go and click refresh every time we save and make a change in our application it's going to do that for us all right so what we're going to be doing for our application is we're going to be building a survey form then we're going to have some services connected to it but that's going to cover everything that i want us to talk about so before we move forward let's actually gut out this html file you'll see here that this is just the stuff that we already looked at this isn't going to be helpful to us we're going to cut that out but let's talk about how each one of these components you'll see this component keyword this basically lets us know what this is right and there's a definite file file name convention that goes along with this but this dot html that's going to be our view the dot css that's of course going to be our style sheets one thing to keep in mind with angular style sheets by default if we have a css folder or a style sheet in our component level like this it's actually going to only apply even if we create a name an id it's only going to apply it directly to the component here it's it's the styles for this specific component you'll notice the spec.ts file we don't need to worry anything about this right now all this is is some karma and jasmine unit testing i'll have a separate tldr video going over specifically karma and jasmine and how to get going if you're interested in testing specifically with angular i have uh my part two course we write a ton of tests we're building a cryptocurrency um front-end application using a cryptocurrency api and uh it dives deep into that uh if you're really interested in that so uh then we have our app component and app module we'll come back to app module in just a second but this app component now remember i told you this is how we build our reusable parts you'll see that we're at importing component from at angular core all we're doing here is importing this dependency all right so let's talk about this decorator here and what this basically is this at component so you'll see that we have a selector a template url and a style url when you're defining a component there's three main pieces the selector remember in our index.html where we um where are you index.html where we have this app root this is our selector so the selector allows us to inject the other components into a template into a view and then use it and render it the template url here is the html content that's in there and now remember we're going to be connecting the the component logic to the template but you know in our case we could we had just the angular hello you know welcome to angular and the three links right we deleted all that and got rid of that the styles url this is an array you can have multiple style sheets in here if you want but this allows us to have custom css for our component all right so before moving on let's talk a little bit about modules what they are and what they do modules give us the ability to at the end of the day allow us to import a group of items and install them into our application basically say hey declarations are going to take in your components imports are going to take in other modules that are going to be used and then providers are going to take in services and bootstrap uh are components that will be automatically added when this all launches and runs don't worry really worry about these three main ones here are the ones you have to worry about for the extent of this video and just get up and running so declarations you have components imports you add modules providers you add services we don't have any services yet but modules at the end they really are just a way to add dependencies to your application whether they're external or internal that you've created to your angular application the reason you might use modules is not only to organize your code better but also to um sometimes as applications get more and more complex you may only want to load a third of your code unless they get to the a certain route in your code and then you'll load the other two thirds and so your application will run a little bit faster things like that so that's that's modules and as we go and create components we'll be jumping back in here to add some stuff so let's get started by creating by in our first app component here we're gonna go ahead and um create a heading and a title and we'll get started creating our survey form one more thing before we get started i'm gonna actually install bootstrap this is just gonna be for some styling and css you don't really have to worry about it too much more than that so to do that all we have to do is make sure you're in the your root directory and then go npm install bootstrap and this will take just a second to install all right after it goes ahead and installs you'll see something like this bootstrap's currently in version 4.0 right now and uh what we have to do next we just have to add the dependency even though it's added to our application we have to add it to either one of two places the angular cli json we could add to the styles here i personally like to instead just use an import statement in our global styles say at import and then uh this tilde will essentially hit the root of the known modules and then we'll say bootstrap slash dist slash css slash boot strap dot min dot css it's going to give us access to bootstrap to use as we're building out our components now all right so our survey form is going to be about cryptocurrencies um mainly because i already have some cryptocurrency apis i'm familiar with um you don't have to know anything about cryptocurrencies for this tutorial so what we're going to be doing here is we're just going to start off by creating a little container uh this is just some bootstrap and if you're curious how i shorthanded this built into visual studio code basically has a emmet plugin in the background which allows us to type div and then classes like so with the dot or the hashtag for id and hit tab and then it will allow us to uh when we hit tab it's going to create that for us so we're going to go ahead and create this uh div container class then we're going to create a h1 here we just put a crypto survey in it go ahead and save it all right and then of course we need to uh restart our server which we haven't done yet so let's just go ahead and do ng serve real quick that's going to launch as well all right it's back up all right rather than switching between screens and all that sort of stuff i'm just going to put the screen in the bottom left corner and every once in a while i might pull it in for major milestones of the video like towards the end uh so um you'll see here we have our crypto survey it's h1 if we wanted to we could add class text center just to center it make it look a little nice so nothing crazy so far now what we want to do here is we're going to ask we're going to have three parts three inputs uh maybe a name a um a a a drop down like an input a drop down and then a comment so three inputs but i actually want to create a new component to do that so and then also include uh views for the first to start off what we're going to do is we're just going to create the component we're using the angular cli all right so to get to any other cli to generate a component for you all we have to do is ng generate component and then the name of the component in our case um we're going to call it crypto dash form and this will automatically create the component for us uh wham bam go ahead and lower this jump back into our application and you'll see we have this crypto form component now that has been generated in our application so what gets generated with it well we get a css file we get a html file it's just going to have some text in here so that you can see that it displays we're going to get this testing file and we're going to get our natural component here uh that basically everything said about uh with the constructor and ng on in it we'll talk a little bit about what that is and how we're gonna use that uh moving forward so uh one other thing that happens in our app module you'll see here we it automatically will take import our crypto form component and add it to our declarations using the angular cli so we don't have to worry about that if we're using the angular cli but now that we have our component created how do we add a component to another application well it's pretty straightforward right we saw how we did with app component so uh how would crypto form component well do it well let's look at our selector here we have app dash crypto dash form go ahead and uh copy that and we go ahead and jump right into our appcomponent.html put that hit hit tab save it and we should see the text that was in there and we do where it says crypto form works right or you see that there's something there very small if you're watching this on mobile all right very nice let's go ahead and delete that and now we're just going to create our form real quick uh so we'll do a div uh we'll make it a row and then we'll create a uh div call excuse me um um i'm sick why filming this so i apologize if i'm sneezing um so we'll go ahead and create a md-6 we'll put a label in here this will be with like font dash weight dash bold to make the label there and um this will be for oh what was this uh we'll do name and then in here we'll have our name and then we'll have an input this is going to have a class of form control all this stuff is basically just basic html and a little bit of bootstrap so it looks nice and uh we're gonna give this an id equal to name so when we click on the label it goes in there and um we'll go ahead and create another we'll save that real quick so that should give us a little label and a little form control uh nice uh let's click name go in there cool let's go ahead and create another div real quick and then we'll uh this will be uh div dot call dash md six another uh label dot um font dash weight uh we'll call this for uh this is gonna be a drop down of some cryptocurrencies and we'll just call this cryptos and we'll say favorite crypto and then we're going to create a drop down uh so we have our select tag and uh this will be we can get rid of name here we don't need that but we do need id here for cryptos and then we're gonna go ahead and create an option and we're gonna iterate through that in just a second so uh one more thing that we need to create for html let's spread that out a little oops let's spread that out a little bit so it looks all right and of course i'm meant to add class here equal to form dash control this will just make it look nicer all right and uh while we're at it we don't need to have this in its own row we'll just have a text input div dot uh row div dot call dash md-12 and we can just go ahead and put a label dot font dash weight dash bold this will be for comments and then we'll say comments and then we'll have a text area font dash weight dash bold all right uh delete all this other crap all right cool so basically we just did a little bit of bootstrap a little bit of oh this is a form control extrusion so form dash control a little bit of misspelling so we basically created a little bit of html here looks clean it's nothing nothing super crazy and then um let's go ahead and create a button uh we'll just do um div dot row in here we'll have a um hey we're just making it uh it doesn't matter we'll make it a button and we'll say uh dot um vtn dot btn dash outline dash success uh oh and also let's make it let's just make a block level button and then here we'll just say um um send form something like that all right uh oh it's not gonna look right if we don't do this this will do it so everything's on the same page all right cool uh and maybe we'll add a little bit of padding to the top or margins at the top so mt-2 just a bootstrap margin uh class very nice all right cool so uh pretty basic so uh we've created our component we're not using routes yet we're not going to worry about that but let's actually and we haven't done any logic in our component yet we'll come back to that in a second but let's go ahead and actually create a service because we want to populate this drop down here with a list of cryptocurrencies so how do we go and create a service all right before we move forward let's look at the the endpoint that we're going to be getting our data from we'll be getting it from https colon slash slash api dot coin market cap dot com slash v1 ticker and um if you don't have uh a json uh i have an extension called the um json formatter you can just google type chrome extension json formatter it'll come parse like this um and so i highly this is just straight up text but sometimes they'll come back as one long string so you can't collapse it i really like this plugin it's a great one but basically what we're going to do is we're just going to go ahead and pass in this name property uh from the object but first we have to get the service so that we we can actually do the ajax calls let's go ahead and create our service we're going to create it just like how we did our component if you remember earlier where we can do ng generate service and what are we going to call it well in this case i think we're just going to call it our crypto service wham bam cool uh so you'll see that we have created a crypto service it added here now we're not going to be talking too much about good file structure and folder structures there's just no time but um typically i would have my own i would have a uh every one of my components would have their own folder and a services would have its own folder model would have its own folder pipes would have its own folder so on and so forth but for the sake of this video in time we're just going to go ahead and not worry about that so you'll notice that when we create a service a couple things happen one it creates a test a test application here for us to test the service we're not going to worry about that again and then it creates our service you'll notice here that we have this at injectable this allows us to create a service at the end of the day similar how we have to pass in the the metadata with the at component the at injectable is for uh services uh that's going on here and you always also notice that now oh it didn't add it that's very i thought it was gonna add it so we have to add the crypto service in order for us to use it in other applications here um to the application so we're gonna import uh what did we what did it end up being crypto service service if that isn't a bad name i don't know what is so let's go ahead and just drop off that last service real quick uh crypto service uh i probably should have named the virtual service so from what are we going to name it right here just pass that in cool so now that we have it imported we have to add it to our ng model though uh importing it here without adding it to the ng model does nothing services get added to the providers now our applications will have access to our service so how do we make an ajax call from our service though because that's our that's our end goal right that's what we're trying to accomplish okay so as of angular 5 the http um module slightly changed and so uh we're going to import in our service the http client and that's going to be from at angular slash common slash http now one thing to be able to use this is we actually have to import the http module in our app module here so that we have access to this essentially all right so in our component in our excuse me in our module we're going to import the http client module from uh the same place that we just did a moment ago for http client now this is going to be at angular slash common slash http and then uh now that we've imported it we have to go to our imports here and just let it know that we plan on using it and adding it to our imports so now that we've done that we'll have the ability to actually use the http client now when you're doing a service in the constructor if you're a constructor basically all it really all you really need to know about this if you're not familiar with more object-oriented programming is a constructor essentially when we create our crypto service these are the properties that get created along with it that it that uh or these are the the dependencies that get added to it and so we're going to create that dependency and we'll just create uh we can just put http we're not going to put anything as public or private because i don't want this to confuse anybody so http of type http client now that we've done that whenever you actually go and use the crypto service we'll have the ability to go and um and use the http client module so how do we go about actually doing an ajax call it's pretty straightforward we're going to create a function uh in here called um get cryptos and all we want to do here is return this dot http dot get and then remember that route i was just telling you about a second ago we're gonna take this route and we're gonna pass this in like so and then we're going to say uh what's the issues giving us here http doesn't exist on type crypto service yes it does i think this is just um a little bit of the uh module issue here sometimes when you add new modules without restarting your server you get some some little warnings we'll worry about fixing those warnings later on so what we're going to return here is what's called an observable default it returns a promise so the way that we convert our promise to a observable is we just use the concat map and what we're going to get back from here is a response let me go ahead and wrap that and what we want to do is take that response and we want to take that response and we want to return it back as an observable in json form so now that we've done that this will allow us um did i spell crypto wrong c-r-y yes okay kryptos there we go um to subscribe to that observable in our component and then get that data let's go ahead and see what that's going to look like all right so how do we add this service to our component well exactly how we added http to our service is now when we jump into our crypto form component.ts in our constructor and we um we are going to first we have to import that service so we're going to import the crypto service from uh dot dot slash crypto service and then we're going to add it as a dependency and in our case we're just going to call it crypto service and then uh of type cryptoservice now by default we want it to actually fire off and that's what this ng on init is essentially when the component loads it will then fire off whatever code is within here on init comes from at angular core and you can just put implement on it as well as this function name ng on init to make sure that the code gets fired off so all we're going to do is say this dot crypto service dot get oh and of course make sure you spell crypto service or your intellisense will not work dot get cryptos what is going on here no i spelt it right okay cool dot get kryptos and then what we want to do is we want to subscribe to those cryptos and this is going to pass back some data and all we want to do here good time being just make sure we set everything up just want to go ahead and console.log that data save it and everything should work although this is giving me an error all right so it looks like it's having some issues detecting our our dependencies what we're going to do is we're actually going to close our server and then we're going to rebuild it the reason for this is sometimes when you add new add new dependencies to modules create new components it angular sometimes doesn't know they exist and i think that's what's happening here so http does not exist on crypto service okay so my mistake here is uh we have to actually jump back in here and put this public property on apparently for dependencies and this will allow us to essentially have access oops to our crypto service within it otherwise i think it's assuming it's private or it's assuming that it's it's so i didn't want to do any public or private uh aspects of our application here but it seems when we do dependency injection we have to actually add that and so let's jump back into crypto service and do the same thing public in this case really only means that hey uh other applications can use it even the user can call this if they want to and so now we'll have access to our application and concat map and i also made a little mistake here um concat map you don't have to do this in the application anymore you used to have to in the old one but what we'll have here is just this get call go clean up the code a little bit no big deal and then jump back into our crypto form component which now you'll notice and i'll go ahead and pull this down for this you'll notice in the chat here we get our 100 cryptos and we have access to the whole thing uh that's because the reason for that concat map is when we made the change uh from angular http to angular common http they they um convert it from promise to observable for you and so that's that's why we're doing that we no longer have to do that so that's why that function doesn't exist all right the next thing that we're going to do is we have to actually store this data right it does no good for us to use it in our template if we can't store it and iterate through it so what we're going to do is we're just create a variable here and we're just going to call this um cryptoarray and uh what this is is is a property of our component and cryptoarray is probably a really bad name so let's instead call this top 100 cryptos and um we'll just initialize it here and then in our data instead of just console logging it we'll say this top 100 cryptos is equal to the data in a production level application we would have some models and we'd be creating some classes and maybe an interface we're not worried about that right now we're just trying to get the basics down so we create this property and this top 100 cryptos now that we have this well we can actually use it in our application so let's jump into our crypto form component and what we want the whole reason we set that up was for this drop down to actually populate with values and the way that we can iterate through an array is we can use this structural directive here called ng4 which will let us do that and all we have to do is say we'll say let crypto now that is our element that we're going to be iterating through of top 100 cryptos that's our array and then using stringer interpolation with these curly braces we just say crypto dot name that dot name of course comes from the the application that the uh that we were looking at and you'll see here we have our 100 cryptos in order of i believe market share um and while we're at it let's just have add an option here so that it's not going to select the very first value but now we've set up our service with a with ajax called do a git call everything's working well save that and bam so we have access to the top 100 cryptos very cool but how do we actually store the data and pass data and you know how do we how do we do that well we're going to use a something called ng model so ng model allows us to create essentially uh place a two-way binding so that we can change a value in the controller in our component and we can change values in our template or our our view here and so do that let's go ahead and jump into our form component and we'll just define an object real quick and um we'll just call this crypto survey and this is going to be equal to an object and we're going to say name and by default we'll set it to an empty string and again you'd probably be doing this in class and then we'll say um favorite crypto that we'll set that to an empty string and then uh we'll do comments and we'll set that to an empty string so we have uh another property like we have with our top 100 cryptos from earlier but now we want to be able to target this directly and change the values so how do we how do we modify our html to do that well on our input here we can use a ng model and assign it and what we're going to assign it to is essentially exactly that uh which i forgot what the hell the name i just defined it was uh crypto survey what an appropriate name dot name so we're going to save that and you see we get this big scary wall of text why did we get that well uh one because i first forgot to put name but we should get i believe we should get another wall of text okay now we get a less scary but still scary uh well attached can't buy the ng model since this is a known property of input all that means is that we actually have to jump into our app module and we have to import the forms module right so they're assuming that you're doing some sort of form if you're using angie model you're probably working with forms and they want you to go ahead and import the forms module and add it to your application and that's going to be from at angular forms very cool take our forms module throw it in there save it and that should solve our issue moving forward and now we can go ahead and and everything works and you'll notice that if we wanted for instance to set name by default to dillon we could change it in our application and you'll see it loads with dylan and if we were to change this uh it would affect this as well and one way that we'll we'll show that is when we do our submission so let's go ahead and delete that and we'll just go and add ng models to the rest of the application like so so uh added on the select and i called that what did i call that favorite crypto and gonna copy that one more time and then comments i can remember comments where are you text area all right comments cool so uh now we've added uh we've now connected in both directions our application here um but where does this we want this form to send us somewhere right um really what we want this to do is we wanted to do a cl we want when we click this to have it call and send some data somewhere in our case we're not going to send anywhere we're just going to pretend like we are but how would we do that well we can add this click event here that then calls a function that's called send form and does some stuff in our case we're going to go ahead and create a function called send form and all it's going to do is console.log top 100 cryptos cool and we can see that just the two-way binding is working just fine so now it's like that we go ahead and put dylan remember everything's starting off empty we'll do bitcoin and we'll do like okay then uh i don't know what to put in the send form and cool when we send the form oh i didn't mean top 100 cryptos i meant crypto survey excuse me uh but you did see that it logged out the top 100 cryptos but that wasn't what i was going for so dylan bitcoin send form and you'll see in our application now that we've actually modified the way that this is going to look favorite crypto name uh oh look we have a bug in our code favorite crypto did not set its value the reason for it is we didn't set our drop down uh value which is why you do these checks which is pretty straightforward this is just some html really at the end of the day and all we have to do here is jump back to our option instead of every value being that all we want value to be and we'll just wrap this when we wrap this like this what this essentially is doing is now doing property binding where essentially if we wanted to pass in a boolean that would be like that and not it wouldn't be the string true and it's the same thing for crypto dot name this will allow the name to be put in there not specifically the string crypto.name and then you'll see now we go ahead and put something here go ahead and put something here select bitcoin submit our form and bam now we have bitcoin in there as we wanted before all right so next what we're going to do is we're going to go ahead and create routing and see how we can set up our routes in angular this is a you know pretty common property of earth item topic in single page applications is a single page because we essentially create these mock routes where we only display certain things if our route or our url here is in fact a certain path uh we're not actually reloading the page we're just changing what's in our view and so what's going to happen is from name favorite crypto comments and sun form when we click the send form we want it to then go and change the route we're still going to have our crypto survey heading there because our router outlet we're going to add this as our as our router as our route as our view that changes based on what our route is so how do we do that well uh first thing we're going to do real quick is go ahead and create a new component go ahead and go to your like so i should have had this open my apologies tldr tldr dash angular get bash and uh ng generate component and in our case we're going to just call it form dash submitted and that's going to generate a new component for our application cool here's our component has all the same stuff that we already talked about um we're not going to worry too much about that right now instead what we're going to do is we're going to comment out this app crypto farm form and you'll notice that it it goes away right as we would expect right because we don't have that anymore so what do we want to do well we need to do some setup well if you haven't noticed by now angular works off a lot of different dependencies and it has this setup a lot of you know these ng modules allow us to set up and say what dependencies we're going to use and what part of the library want to use well we're going to want to import the router module so that we can actually use the routes at angular slash router like so all right up next what we're going to do is we're going to go ahead and create some route here i'm just going to create a constant variable called routes and we're going to set this equal to an array of objects these are really just going to be our routes that we're going to apply uh in in a second so you'll see here we're gonna have an object there's gonna be a path which is a string an empty string is gonna be our default path right our homepage if you will and then we're gonna have this component which is going to take in what we what component we want in our router outlet which is essentially a tag this is where we want to inject our view where we want that to be so in our case we have our crypto form component we just defined so we're going to say look when we're on the home page to find to find this there and when we're on this other route in our case we're just going to call it submitted uh we want the component to be our form submitted component i apologize for the bad naming convention i'm kind of making up this tutorial as we go along uh but we can talk about clean code in a separate video and uh good naming conventions and things like that so we have form submitted component now the way that we add our routes and able to use it well as we all know we have to add our module to imports and then we're going to have this dot for roots for root here and if you see then we're going to pass in our routes so this for root essentially adds our application on the root level all you have to really know is this is a setup to do roots that's really all you have to know um for what we're trying to get going and or for routes not for roots and so now that we've done that the one last thing that we have to do is instead we just have to create our router dash outlet tag and save it like so and you'll notice that our app crypto form component is now here and we can go ahead and delete this comment right because we are on the index page and if we go anywhere else you know it's not going to know what is what that is and we're going to get in here there's a couple different ways that we can solve this uh one we create a 404 component but we don't need to worry about that right now that's beyond the scope of this course but in our remember we created another route which is just submitted and now you can see our form submitted works our form submitted component is there and we're dynamically changing the routes so that it it goes and uh works accordingly so how do we uh how do we just link to this and um pass how do we create our routes uh to go and send to it well it's just an anchor tag at the end of the day really so if we go to our crypto form component we can go to right here we're not going to do anything with this send form component um we'll just create a router link on our crypto form template and we'll just say router link and what do we want it to equal in this case we just want it equal to submitted and bam it jumps between everything we want we can throw this router link on anything that can be clicked essentially router link can also take in an array of values so if you're going to have different values now this would work exactly the same just something to keep in mind so if we click send form it's going to work the same that way if you have parameters or ids or you have multiple things you can concatenate that but um it can take in a string or it can take in an array all right while we're at it let's just go into our form uh component and just add some text that makes sense something like um you know we'll just make this an h1 we'll make this like an h3 and we'll add the text center class and we'll just put some something like thank you thank you for your input exclamation point we're not going to really worry about too much of uh making this app look too good but that's that's that's one thing that i can that we can do to get started all right so let's jump back into our crypto form component and we're going to jump into the html we're going to just first off we're going to display what a pipe is one of the common pipes that you can use and so a pipe just as a reminder something that you are going to use to edit data or to to essentially filter how you see data and what it what it looks like and a good example that is the date pipe so let's create um a variable here we'll just call it today's date and we'll set this equal to a new date oops new date there we go and we'll jump into our crypto forum component and just right at um you know let's jump back here real quick and then we'll create a new div here and in here i'll have a just put a little h h5 that is um today's date again we're not trying to make this look the best it's mainly about illustrating an idea so today's date data oh my goodness today's date there we go all right cool so this very long string uh eastern daylight time all that that's not very good what we can use though is some built-in pipes in angular to actually go and filter this so that we can get in the form we want without having to manually change it so the date pipe uh we're looking at that documentation right now you can see that it comes with several formats that you can use as an example short is equivalent to month day year year hour minute minute and then time zone all that sort of stuff um and then you have these are all predefined but you can see there's a lot of different examples and uh it goes on and on and there's a lot of documentation some other pipes in here to keep in mind they have the number pipe which is allows us to um you know do decimal places on our numbers there is the to lowercase and to uppercase pipe um all all that sort of stuff there's also the slice pipe um there any others bunch of pipes and you can write your own uh we'll go ahead and showcase how to write our own real quick after we use the date pipe so we should i believe we already have the common module imported here but all we need to do to use the datepipe you'll notice we're using these and primarily in our html so if we parse by date you'll see we get the default one but now we get this very nice added very nicely filtered default value now if we wanted to do our own custom one we have this colon that comes so the pipe as you might imagine is denoted by this pipe and if we wanted to add uh custom ones we could do it with a colon and this essentially tells us hey we're about to add in an optional parameter to our pipe here like so and we could pass it short remember we had the short we could also pass in i believe mm is month month minute or what is that minute that might be minute yeah this minute i think mm is month which is the fourth month um for our useful just passing short but that's how you pass in optional parameters now let's go ahead and create our own custom pipe all right we're gonna make a very simple pipe what we're gonna do real quick is just create a drop down here that has a boolean value of true or boolean value of false say hey do you like crypto or do you believe in crypto so we'll just do uh create a little div real quick make that a row a little div dot call dash md-12 and a label dot font dash weight dash bold and uh love crypto something like that and we'll just ask a question it'll be true or false do you love crypto and uh ideally you probably wouldn't use a a um select tag for this but we're going to uh select love crypto and then in here we'll have option uh value true and then we'll have um true here for now and then we'll also have option um false and i'll have false here for now as well and what we're going to do is we're going to write a simple pipe that says if it's a true value if it's if the value is true go ahead and change it to yes output is yes if the value is false go ahead and output it to false all right so let's start by creating a new pipe how do we create a product at this point you probably guess ng generate pipe and we're just going to call this bull uh bull yes actually let's call it yes yes no and it's going to create a new pipe for us jump into back into our component for submitted and then you'll see we have our test file and then we have our actual pipe all right so let's go over what's going on in our pipe here so you'll see we're importing two things for our pipe we have pipe pipe transform this is our decorator and uh remember how we did slash date that's what this name is for in our case it's going to be yes no and then of course we're exporting uh yes no pipe and we're implementing pipe transform what is the transform property coming from pipe all that is is essentially our logic hey when we call this pipe on a value what do we do with it and so uh here we can go ahead and take uh get rid of all this sort of stuff uh not trying to introduce any type script as much as we can in this in this introduction video so what we want to happen here is say hey if value meaning if it's true return yes else we don't need else right because it's a return statement uh it's not going to hit this unless the sales else go ahead and return no and so now we've essentially written our first pipe let's go ahead and save this other file and excuse me for having that up and what we're going to need to do now is we're going to actually need to import that pipe in our module so that we can use it elsewhere all right let's go ahead and fix our we just have this very nasty little input here and so let's go ahead and uh fix that by just adding this uh class form control which is again it's just a bootstrap class form dash control which will just make it a little bit more pretty cool so what we need to do is jump into our app module and import that pipe oh look it's already been imported for us you'll notice that pipes go in declarations as well just as components do let's go ahead and close some of this and so what we can do here is we'll just do some string input interpolation we'll put the string true here and then we'll pipe it with yes no and then we'll do the same thing with false so bam so you'll see our values here are actually oh excuse me so the reason that this is returning yes and yes it's not because our pipe is flawed because i made a mistake here so remember we're expecting a boolean value and when they're strings they are going to always be true because it's going to be um so you'll see yes and no uh and the value here is true and false and so that's a very basic pipe pipes are really powerful i i write i use a pipe um that i just call the keys pipe which essentially if i have an object i don't know what the names and the keys are going to be i'll do the keys and i can have access to all the values in it and it's really dynamic in that way something i use quite frequently so uh when you're creating pipes and you're really wait how how you want to think about pipes is when you're creating something that's going to affect how it gets rendered in the ui you might want to think about using a pipe rather than writing some custom logic in the component and that way you can reuse it in the other other components as well all right so i think we're going to stop there for this quick rundown of angular there's a lot of other things we can talk about in angular animations we could talk about um um sending um data from one component to another and from a parent to a child child to a parent we can talk about how to you know inject services and other services so we can talk about testing there's it the list can go on and on angular's very very long so if you're interested in diving a little bit more deeper deeper in it i have two angular projects uh part one is a introduction projects about three and a half hours of content where we're going to be building a personal portfolio we're going to introduce it to a lot new concepts as well expand on what we have and then part two is a cryptocurrency project where uh it's about eight hours of content or six hours of content i forget what it is it's a it's about twice the size of the original project and uh this goes into even more advanced details so if you enjoyed this i appreciate you guys watching the video don't forget to comment like subscribe sure i hope it gave you maybe a little bit of a head start a jump start to get going with angular 5 and angular thank you for watching the video don't forget comments milo i'm trying to do an outro here uh comment like subscribe share support me on patreon hit that notification bell all that good stuff um i'll see you in milo we'll see you next time bye guys\n"