In this episode we take a look at the basic concepts behind components, pipes, and directives in Angular 6. https://angularfirebase.com/lessons/angular-components-basics-top-ten/

- Router Basics https://angularfirebase.com/lessons/basics-angular-router/
- CLI Basics https://angularfirebase.com/lessons/basics-angular-cli/
- Angular Components https://angular.io/guide/architecture-components
2024-02-04T07:30:17.135Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
f441e004-6be8-42ac-b96f-5f449477f22f
50fee82d20c7c1bdcf04cb35e1a8aecd680261d741ff5289dee2ce6bcb0ba194
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Components are like the Lego pieces of an Angular application.
If you don't know how to put them together properly, you're not gonna be able to build anything cool.
Over the next 10 minutes or so, I'll show you all of the basics in Angular Components and how to piece them together in an application.
This video is beginner level, so if you know a little bit about JavaScript and web development, you should be okay.
If you're new to the channel, make sure to like and subscribe and grab the full write up from angularfirebase.com.
The first question we need to answer is what is a component in the first place?
And I think the most simple answer to this question is that it's just a controller for the user interface.
As a developer, you write components to control how your app is experienced by end users.
To show you this in practice, I'm opening a brand new Angular 6 app that was generated with the CLI.
Then I'm generating a new component called home, which you'll notice creates 4 different files in the App Directory.
The vast majority of the logic that you'll write will be in the Home component dot TS file.
The component itself is just a TypeScript class, but it uses this component decorator to sprinkle in some Angular magic.
The most important thing is that it allows us to bind data from this TypeScript file to the HTML template.
The first thing I wanna show you is how to bind TypeScript code to your HTML.
Let's define a property on this class called clicked that defaults to false.
Now let's go into the HTML and let's imagine we have a button that we want to disable after it's been clicked.
We can bind our TypeScript data to this attribute in HTML by wrapping it in square brackets.
Disabled isn't something Angular provides.
It's an actual attribute on the HTML element, which I'm looking at here in the Mozilla documentation.
The special thing about Angular is that we can wrap this attribute in square brackets and then bind it to our TypeScript.
So so instead of just passing it a boolean value like false, we can actually pass it our clicked property, which we can then toggle on our TypeScript as needed.
It's currently set to false, so we should be able to serve our app and the button should be clickable, which it is.
If we go into TypeScript and change our clicked property to true, you'll see that the button is now disabled and unclickable.
In addition to attributes, we can also bind to events that happen in the HTML.
So let's say we wanna change this button to disabled after it's been clicked once.
We can use parenthesis to bind to the click event on this button and then we'll pass it a function that will define in our TypeScript to handle this event.
Now we can switch back to TypeScript and define this event handler method.
We currently have the clicked property set to false, but we want to set that to true once the button is clicked which we can do by calling miss clicked equals true.
When we click the button, this handler will fire, and then the button becomes disabled because it flips that property to true.
Let's say, you bind to events and attributes in Angular, but one other fundamental thing is interpolation.
And basically, all that means is we're taking a raw value from our typescript and rendering it out in the HTML.
So for example, let's say we have the title here that shows the Angular version that we're currently running.
So the title is just a string value that gets created dynamically, and then we can go into our HTML and use the handlebar syntax to interpolate it into the template.
If we reload the browser, it should show us that we're running Angular 6 for this project.
So now that we have a working component, how do we actually use it within the context of our Angular application.
The most basic way is to declare it in the HTML with its selector which, in this case, is just app dash home.
If we go into this project's app component, we can just declare our app home page there and it will be rendered out like it's just a regular HTML element.
But we can also load it with the router and have it appear where this router outlet is based on a certain URL path.
Check out episode 113 to learn all about the router.
But the most basic use cases that we set up a path and then we point this path to our component.
If we reload the app in the browser, you'll see it looks exactly the same.
But if we open the Augury plugin and go to the router tree, you can see that it's being loaded by the router instead of just the HTML directly.
You can also load components dynamically but without changing the route.
A common use case would be like a pop up or a modal window.
This technique is used frequently in the Ionic framework.
For example, the alerts controller will dynamically load an entry component whenever the button is clicked.
And lastly, the cool new way to load a component is with Angular Elements which allows you to convert it to a regular web component and then use it outside of Angular completely.
So you could just drop it into a regular HTML page which you can learn all about in episode 1 0 2.
The next thing we're going to look at are directives and a directive is basically just like a component but without its own HTML or CSS.
Instead it attaches to a host element and changes the behavior of it.
To demonstrate this, I've added an object called boat with some dummy data to our component.
Then.
Perhaps the most useful built in directive in Angular is n g f.
And any directive that starts with a star means it's a structural directive and controls how elements are rendered in the DOM.
In this case, we're attaching n g f to a div and it will only render this div if the right hand side resolves to true.
So going back to our Clicks property, we're only going to show this boat data if the button has been clicked.
When we open the app, you can see that it looks just like it did before, but when we click the button, it displays our boat data.
You'll end up using n g f all the time in Angular, and there's one other directive that that.
You'll use very frequently as well, which is n g 4.
You can use it to loop over an array of data.
So let's imagine we have an array with multiple boats in it.
We've already mapped out how we want each boat to be displayed.
But instead of using ng if here, we can replace it with ng 4.
Then we'll iterate over the boats array by saying let boat of boats.
Then the div that this directive is attached to will be rendered for each item in that array.
If if we open the app, you can see we now have multiple boats utilizing the same presentation logic.
So those are super powerful.
But another thing you often want to do is display different CSS classes conditionally based on some logic in your TypeScript.
Just as a basic example, let's imagine we have a green and red CSS class.
We can use the ng class directive to control which CSS class gets applied to the h one title based on the name of the boat.
So we'll pass the directive in object where the left hand side of each object property is the CSS class we want to apply.
Then the value or the right side is an expression that resolves to true or false, which in this case will either be boat name equals starfire or boat name equals oracle.
Now we get a different color for each title based on this logic.
So far, we've only looked at built in directives in Angular, but you can also build your own custom directives.
Electives.
Let's go ahead and build our own with the Angular CLI by running an ng generate directive which we'll call magnifier that will increase the size of an image when it's hovered over.
Overall, this looks pretty similar to a component, but the key difference is that there is no HTML template or CSS styles.
Instead, it's used as an attribute on an HTML element.
This particular directive will be used to modify the width of an image element.
So we can bind to the host element's width by using the host binding decorator.
Lighter.
Then any image that uses this directive will start with a width of 200.
Then we also want to listen to the mouse enter event to know when the user has hovered over the image with their mouse.
With that, we can use the host listener decorator, pass in the DOM event that we wanna listen to, and then define a function to handle this event.
In this case, what we wanna do is really simple.
Just increase the width from 200 to 300.
Now we'll switch back to the HTML in our component and we currently have an image in there that displays the boat image with a width of 200.
Let's go ahead and take this out and replace it with the app magnifier directive.
If we go back to our app and hover over the images, you'll see that they're resized as soon as we hover over them.
Not the most useful thing in the world, but you get the idea of how you can use components and directives together to write really dry reusable code.
There's another mechanism in Angular that helps us write reusable code called pipes.
A pipe is always used in an interpolated value in the HTML.
So so let's imagine we have a big number here, we can use the built in number pipe to round this down to 3 decimals.
Angular has some useful built in pipes, but the real power comes when you building your own custom pipes.
And chances are somebody's already written the code that you need for your use case, so make sure to check out the AngularPipes GitHub repo for a full list of examples.
Like there's one really special pipe that I wanna talk about now, which is the async pipe.
In web application, you're commonly fetching data as a promise or an observable, and the async pipe allows you to do this automatically in a predictable way directly in the HTML.
In this example, I'm converting our boats array into an observable by using the RX JS of method.
So now it becomes an observable object, so our regular ng for loop isn't going to work.
What we can do is simply add the async pipe to our for loop, and now it's going to convert that observable to an array by subscribing to it, and in addition, it also unsubscribes when this component is destroyed.
That's a whole another subject on RxJS, but just know that it's a very useful mechanism for simplifying your Angular code.
In a real app, we'd probably be fetching these boats asynchronously from a database, and the async pipe allows us to treat them more like a synchronous plain JavaScript array.
At its core, a pipe is very simple.
It's just a function that takes in a value and then spits out another value.
Each of our boats has a year property on it.
Let's say we want to only display the last 2 digits in that 4 digit year.
All all we have to do is go into our custom pipe and then implement this transform method.
The value represents whatever value is inside the handlebar syntax in your HTML, then the value you return is what you want to be shown in the HTML.
In this case, we'll convert the number to a string and then grab the last two elements on that string.
Then we can go add it to the boat year in our HTML.
And then if we reopen the app, we'll see that we only get the last two numbers on the year.
So so now that you know a lot about components, pipes, and directives, I want to talk about a concept that's really important for Angular developers and that's never touch the DOM.
If you're an experienced JavaScript developer, you're probably used to doing something like this where you call document query selector, then grab some element in the DOM and change its inner HTML.
And when you're building a progressive web app, this code will work perfectly fine because the DOM exists in a web app.
But if you write code like this and you ever wanna do server side rendering or build a native mobile app.
This code will not work because the DOM does not exist on other platforms.
So now you know why the use of libraries like jQuery are generally discouraged in Angular.
Now let's switch gears into the component life cycle.
A component is just a class, so the very first thing to happen in its life cycle is the constructor is fired.
But components have relationships with other components and they have bindings that are initialized in the HTML, so things get a little bit more complex.
In Angular, you typically don't do anything in the constructor except add your dependencies.
And that's because your property bindings aren't guaranteed to be available until you run ng on init, which is the first time change detection runs in this component.
So the on a net life cycle hook is where you do all of your setup.
Maybe you're fetching data from an API or you're setting up a reactive form or something along those lines.
I'll go ahead and add our boats observable to n g on a net just to simulate it coming from a database or API.
The the very last thing to happen to a component is that it's destroyed, which triggers the on destroy life cycle hook.
This is where you would do any tear down for your component an Angular that is commonly unsubscribing from an observable to prevent things like memory leaks and performance issues.
On init is by far the most common hook that you'll use, but if you have child views inside of your component, you might also wanna use after view init which will ensure that your child views are it as well.
Now that segues into a really important concept in Angular which is change detection.
Behind the scenes, Angular is using something called Zone JS that will listen for any events or asynchronous activity in your app and then re render components as needed.
You can determine when change detection is happening by using this do check life cycle hook.
You wouldn't normally use this to do anything significant, but it is useful for debugging at times.
If you're building an interactive app, this life cycle hook will be triggered constantly.
You can see we get the 1st console log when the component is initialized.
That's when the NG on a net life cycle hook runs.
And then as we hover around, different events take place and that triggers change detection and the console log in the browser.
So now I want to segue into a concept that is also common in other JavaScript frameworks like React and Vue, and that's marked components versus dumb components, or also commonly called stateful versus stateless or container versus presentational.
And basically all this boils down to is a separation of concerns to make your code predictable.
A smart component is generally a page or container that controls how things work throughout the app, while the dumb component is only concerned with presentation logic.
I've generated a new component called boat that will be our dumb component.
It's going to take the data from this n g four loop and extract it into its own isolated presentational component.
This allows the parent component to focus on more low level things like synchronizing the state of the app and fetching the items from the database.
As your app grows in complexity, this just becomes an easier way to rationalize what's happening in your code.
So the home component is a container that fetches the data while the boat component is only concerned with presenting the data in the UI.
Like there's a ton of other things we can talk about with Angular Components, but many of those you'll see in practice as we build out different features on this channel.
I'm gonna go ahead and wrap things up there.
If this video helped you, please like and subscribe.
And if you wanna build more advanced real world features, consider becoming a pro member at angularfirebase.com.
You'll get exclusive pro videos every week plus a copy of the Angular Firebase Survival Guide.
Thanks for watching, and I'll talk to you soon.

Speaker 0: Components are like the Lego pieces of an Angular application. If you don't know how to put them together properly, you're not gonna be able to build anything cool. Over the next 10 minutes or so, I'll show you all of the basics in Angular Components and how to piece them together in an application. This video is beginner level, so if you know a little bit about JavaScript and web development, you should be okay. If you're new to the channel, make sure to like and subscribe and grab the full write up from angularfirebase.com.

The first question we need to answer is what is a component in the first place? And I think the most simple answer to this question is that it's just a controller for the user interface. As a developer, you write components to control how your app is experienced by end users. To show you this in practice, I'm opening a brand new Angular 6 app that was generated with the CLI. Then I'm generating a new component called home, which you'll notice creates 4 different files in the App Directory.

The vast majority of the logic that you'll write will be in the Home component dot TS file. The component itself is just a TypeScript class, but it uses this component decorator to sprinkle in some Angular magic. The most important thing is that it allows us to bind data from this TypeScript file to the HTML template. The first thing I wanna show you is how to bind TypeScript code to your HTML. Let's define a property on this class called clicked that defaults to false.

Now let's go into the HTML and let's imagine we have a button that we want to disable after it's been clicked. We can bind our TypeScript data to this attribute in HTML by wrapping it in square brackets. Disabled isn't something Angular provides. It's an actual attribute on the HTML element, which I'm looking at here in the Mozilla documentation. The special thing about Angular is that we can wrap this attribute in square brackets and then bind it to our TypeScript.

So so instead of just passing it a boolean value like false, we can actually pass it our clicked property, which we can then toggle on our TypeScript as needed. It's currently set to false, so we should be able to serve our app and the button should be clickable, which it is. If we go into TypeScript and change our clicked property to true, you'll see that the button is now disabled and unclickable. In addition to attributes, we can also bind to events that happen in the HTML. So let's say we wanna change this button to disabled after it's been clicked once.

We can use parenthesis to bind to the click event on this button and then we'll pass it a function that will define in our TypeScript to handle this event. Now we can switch back to TypeScript and define this event handler method. We currently have the clicked property set to false, but we want to set that to true once the button is clicked which we can do by calling miss clicked equals true. When we click the button, this handler will fire, and then the button becomes disabled because it flips that property to true. Let's say, you bind to events and attributes in Angular, but one other fundamental thing is interpolation.

And basically, all that means is we're taking a raw value from our typescript and rendering it out in the HTML. So for example, let's say we have the title here that shows the Angular version that we're currently running. So the title is just a string value that gets created dynamically, and then we can go into our HTML and use the handlebar syntax to interpolate it into the template. If we reload the browser, it should show us that we're running Angular 6 for this project. So now that we have a working component, how do we actually use it within the context of our Angular application.

The most basic way is to declare it in the HTML with its selector which, in this case, is just app dash home. If we go into this project's app component, we can just declare our app home page there and it will be rendered out like it's just a regular HTML element. But we can also load it with the router and have it appear where this router outlet is based on a certain URL path. Check out episode 113 to learn all about the router. But the most basic use cases that we set up a path and then we point this path to our component.

If we reload the app in the browser, you'll see it looks exactly the same. But if we open the Augury plugin and go to the router tree, you can see that it's being loaded by the router instead of just the HTML directly. You can also load components dynamically but without changing the route. A common use case would be like a pop up or a modal window. This technique is used frequently in the Ionic framework.

For example, the alerts controller will dynamically load an entry component whenever the button is clicked. And lastly, the cool new way to load a component is with Angular Elements which allows you to convert it to a regular web component and then use it outside of Angular completely. So you could just drop it into a regular HTML page which you can learn all about in episode 1 0 2. The next thing we're going to look at are directives and a directive is basically just like a component but without its own HTML or CSS. Instead it attaches to a host element and changes the behavior of it.

To demonstrate this, I've added an object called boat with some dummy data to our component. Then. Perhaps the most useful built in directive in Angular is n g f. And any directive that starts with a star means it's a structural directive and controls how elements are rendered in the DOM. In this case, we're attaching n g f to a div and it will only render this div if the right hand side resolves to true.

So going back to our Clicks property, we're only going to show this boat data if the button has been clicked. When we open the app, you can see that it looks just like it did before, but when we click the button, it displays our boat data. You'll end up using n g f all the time in Angular, and there's one other directive that that. You'll use very frequently as well, which is n g 4. You can use it to loop over an array of data.

So let's imagine we have an array with multiple boats in it. We've already mapped out how we want each boat to be displayed. But instead of using ng if here, we can replace it with ng 4. Then we'll iterate over the boats array by saying let boat of boats. Then the div that this directive is attached to will be rendered for each item in that array.

If if we open the app, you can see we now have multiple boats utilizing the same presentation logic. So those are super powerful. But another thing you often want to do is display different CSS classes conditionally based on some logic in your TypeScript. Just as a basic example, let's imagine we have a green and red CSS class. We can use the ng class directive to control which CSS class gets applied to the h one title based on the name of the boat.

So we'll pass the directive in object where the left hand side of each object property is the CSS class we want to apply. Then the value or the right side is an expression that resolves to true or false, which in this case will either be boat name equals starfire or boat name equals oracle. Now we get a different color for each title based on this logic. So far, we've only looked at built in directives in Angular, but you can also build your own custom directives. Electives.

Let's go ahead and build our own with the Angular CLI by running an ng generate directive which we'll call magnifier that will increase the size of an image when it's hovered over. Overall, this looks pretty similar to a component, but the key difference is that there is no HTML template or CSS styles. Instead, it's used as an attribute on an HTML element. This particular directive will be used to modify the width of an image element. So we can bind to the host element's width by using the host binding decorator.

Lighter. Then any image that uses this directive will start with a width of 200. Then we also want to listen to the mouse enter event to know when the user has hovered over the image with their mouse. With that, we can use the host listener decorator, pass in the DOM event that we wanna listen to, and then define a function to handle this event. In this case, what we wanna do is really simple.

Just increase the width from 200 to 300. Now we'll switch back to the HTML in our component and we currently have an image in there that displays the boat image with a width of 200. Let's go ahead and take this out and replace it with the app magnifier directive. If we go back to our app and hover over the images, you'll see that they're resized as soon as we hover over them. Not the most useful thing in the world, but you get the idea of how you can use components and directives together to write really dry reusable code.

There's another mechanism in Angular that helps us write reusable code called pipes. A pipe is always used in an interpolated value in the HTML. So so let's imagine we have a big number here, we can use the built in number pipe to round this down to 3 decimals. Angular has some useful built in pipes, but the real power comes when you building your own custom pipes. And chances are somebody's already written the code that you need for your use case, so make sure to check out the AngularPipes GitHub repo for a full list of examples.

Like there's one really special pipe that I wanna talk about now, which is the async pipe. In web application, you're commonly fetching data as a promise or an observable, and the async pipe allows you to do this automatically in a predictable way directly in the HTML. In this example, I'm converting our boats array into an observable by using the RX JS of method. So now it becomes an observable object, so our regular ng for loop isn't going to work. What we can do is simply add the async pipe to our for loop, and now it's going to convert that observable to an array by subscribing to it, and in addition, it also unsubscribes when this component is destroyed.

That's a whole another subject on RxJS, but just know that it's a very useful mechanism for simplifying your Angular code. In a real app, we'd probably be fetching these boats asynchronously from a database, and the async pipe allows us to treat them more like a synchronous plain JavaScript array. At its core, a pipe is very simple. It's just a function that takes in a value and then spits out another value. Each of our boats has a year property on it.

Let's say we want to only display the last 2 digits in that 4 digit year. All all we have to do is go into our custom pipe and then implement this transform method. The value represents whatever value is inside the handlebar syntax in your HTML, then the value you return is what you want to be shown in the HTML. In this case, we'll convert the number to a string and then grab the last two elements on that string. Then we can go add it to the boat year in our HTML.

And then if we reopen the app, we'll see that we only get the last two numbers on the year. So so now that you know a lot about components, pipes, and directives, I want to talk about a concept that's really important for Angular developers and that's never touch the DOM. If you're an experienced JavaScript developer, you're probably used to doing something like this where you call document query selector, then grab some element in the DOM and change its inner HTML. And when you're building a progressive web app, this code will work perfectly fine because the DOM exists in a web app. But if you write code like this and you ever wanna do server side rendering or build a native mobile app.

This code will not work because the DOM does not exist on other platforms. So now you know why the use of libraries like jQuery are generally discouraged in Angular. Now let's switch gears into the component life cycle. A component is just a class, so the very first thing to happen in its life cycle is the constructor is fired. But components have relationships with other components and they have bindings that are initialized in the HTML, so things get a little bit more complex.

In Angular, you typically don't do anything in the constructor except add your dependencies. And that's because your property bindings aren't guaranteed to be available until you run ng on init, which is the first time change detection runs in this component. So the on a net life cycle hook is where you do all of your setup. Maybe you're fetching data from an API or you're setting up a reactive form or something along those lines. I'll go ahead and add our boats observable to n g on a net just to simulate it coming from a database or API.

The the very last thing to happen to a component is that it's destroyed, which triggers the on destroy life cycle hook. This is where you would do any tear down for your component an Angular that is commonly unsubscribing from an observable to prevent things like memory leaks and performance issues. On init is by far the most common hook that you'll use, but if you have child views inside of your component, you might also wanna use after view init which will ensure that your child views are it as well. Now that segues into a really important concept in Angular which is change detection. Behind the scenes, Angular is using something called Zone JS that will listen for any events or asynchronous activity in your app and then re render components as needed.

You can determine when change detection is happening by using this do check life cycle hook. You wouldn't normally use this to do anything significant, but it is useful for debugging at times. If you're building an interactive app, this life cycle hook will be triggered constantly. You can see we get the 1st console log when the component is initialized. That's when the NG on a net life cycle hook runs.

And then as we hover around, different events take place and that triggers change detection and the console log in the browser. So now I want to segue into a concept that is also common in other JavaScript frameworks like React and Vue, and that's marked components versus dumb components, or also commonly called stateful versus stateless or container versus presentational. And basically all this boils down to is a separation of concerns to make your code predictable. A smart component is generally a page or container that controls how things work throughout the app, while the dumb component is only concerned with presentation logic. I've generated a new component called boat that will be our dumb component.

It's going to take the data from this n g four loop and extract it into its own isolated presentational component. This allows the parent component to focus on more low level things like synchronizing the state of the app and fetching the items from the database. As your app grows in complexity, this just becomes an easier way to rationalize what's happening in your code. So the home component is a container that fetches the data while the boat component is only concerned with presenting the data in the UI. Like there's a ton of other things we can talk about with Angular Components, but many of those you'll see in practice as we build out different features on this channel.

I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And if you wanna build more advanced real world features, consider becoming a pro member at angularfirebase.com. You'll get exclusive pro videos every week plus a copy of the Angular Firebase Survival Guide. Thanks for watching, and I'll talk to you soon.
Components are like the Lego pieces of an Angular application. If you don't know how to put them together properly, you're not gonna be able to build anything cool. Over the next 10 minutes or so, I'll show you all of the basics in Angular Components and how to piece them together in an application.
animation
This video is beginner level, so if you know a little bit about JavaScript and web development, you should be okay. If you're new to the channel, make sure to like and subscribe and grab the full write up from angularfirebase.com. The first question we need to answer is what is a component in the first place?
youtube
And I think the most simple answer to this question is that it's just a controller for the user interface.
As a developer, you write components to control how your app is experienced by end users. To show you this in practice, I'm opening a brand new Angular 6 app that was generated with the CLI. Then I'm generating a new component called home, which you'll notice creates 4 different files in the App Directory.
software development
software
The vast majority of the logic that you'll write will be in the Home component dot TS file. The component itself is just a TypeScript class, but it uses this component decorator to sprinkle in some Angular magic. The most important thing is that it allows us to bind data from this TypeScript file to the HTML template. The first thing I wanna show you is how to bind TypeScript code to your HTML. Let's define a property on this class called clicked that defaults to false. Now let's go into the HTML and let's imagine we have a button that we want to disable after it's been clicked. We can bind our TypeScript data to this attribute in HTML by wrapping it in square brackets. Disabled isn't something Angular provides. It's an actual attribute on the HTML element, which I'm looking at here in the Mozilla documentation. The special thing about Angular is that we can wrap this attribute in square brackets and then bind it to our TypeScript. So so instead of just passing it a boolean value like false, we can actually pass it our clicked property, which we can then toggle on our TypeScript as needed. It's currently set to false, so we should be able to serve our app and the button should be clickable, which it is. If we go into TypeScript and change our clicked property to true, you'll see that the button is now disabled and unclickable. In addition to attributes, we can also bind to events that happen in the HTML. So let's say we wanna change this button to disabled after it's been clicked once. We can use parenthesis to bind to the click event on this button and then we'll pass it a function that will define in our TypeScript to handle this event. Now we can switch back to TypeScript and define this event handler method. We currently have the clicked property set to false, but we want to set that to true once the button is clicked which we can do by calling miss clicked equals true. When we click the button, this handler will fire, and then the button becomes disabled because it flips that property to true. Let's say, you bind to events and attributes in Angular, but one other fundamental thing is interpolation. And basically, all that means is we're taking a raw value from our typescript and rendering it out in the HTML. So for example, let's say we have the title here that shows the Angular version that we're currently running. So the title is just a string value that gets created dynamically, and then we can go into our HTML and use the handlebar syntax to interpolate it into the template. If we reload the browser, it should show us that we're running Angular 6 for this project. So now that we have a working component, how do we actually use it within the context of our Angular application. The most basic way is to declare it in the HTML with its selector which, in this case, is just app dash home. If we go into this project's app component, we can just declare our app home page there and it will be rendered out like it's just a regular HTML element. But we can also load it with the router and have it appear where this router outlet is based on a certain URL path. Check out episode 113 to learn all about the router. But the most basic use cases that we set up a path and then we point this path to our component. If we reload the app in the browser, you'll see it looks exactly the same. But if we open the Augury plugin and go to the router tree, you can see that it's being loaded by the router instead of just the HTML directly. You can also load components dynamically but without changing the route. A common use case would be like a pop up or a modal window.
This technique is used frequently in the Ionic framework. For example, the alerts controller will dynamically load an entry component whenever the button is clicked. And lastly, the cool new way to load a component is with Angular Elements which allows you to convert it to a regular web component and then use it outside of Angular completely. So you could just drop it into a regular HTML page which you can learn all about in episode 1 0 2.
animation
The next thing we're going to look at are directives and a directive is basically just like a component but without its own HTML or CSS. Instead it attaches to a host element and changes the behavior of it. To demonstrate this, I've added an object called boat with some dummy data to our component. Then. Perhaps the most useful built in directive in Angular is n g f. And any directive that starts with a star means it's a structural directive and controls how elements are rendered in the DOM. In this case, we're attaching n g f to a div and it will only render this div if the right hand side resolves to true. So going back to our Clicks property, we're only going to show this boat data if the button has been clicked. When we open the app, you can see that it looks just like it did before, but when we click the button, it displays our boat data. You'll end up using n g f all the time in Angular, and there's one other directive that that. You'll use very frequently as well, which is n g 4.
You can use it to loop over an array of data. So let's imagine we have an array with multiple boats in it. We've already mapped out how we want each boat to be displayed. But instead of using ng if here, we can replace it with ng 4. Then we'll iterate over the boats array by saying let boat of boats. Then the div that this directive is attached to will be rendered for each item in that array. If if we open the app, you can see we now have multiple boats utilizing the same presentation logic. So those are super powerful. But another thing you often want to do is display different CSS classes conditionally based on some logic in your TypeScript.
boats
visualization
Just as a basic example, let's imagine we have a green and red CSS class. We can use the ng class directive to control which CSS class gets applied to the h one title based on the name of the boat. So we'll pass the directive in object where the left hand side of each object property is the CSS class we want to apply. Then the value or the right side is an expression that resolves to true or false, which in this case will either be boat name equals starfire or boat name equals oracle. Now we get a different color for each title based on this logic. So far, we've only looked at built in directives in Angular, but you can also build your own custom directives. Electives. Let's go ahead and build our own with the Angular CLI by running an ng generate directive which we'll call magnifier that will increase the size of an image when it's hovered over. Overall, this looks pretty similar to a component, but the key difference is that there is no HTML template or CSS styles. Instead, it's used as an attribute on an HTML element. This particular directive will be used to modify the width of an image element. So we can bind to the host element's width by using the host binding decorator. Lighter. Then any image that uses this directive will start with a width of 200. Then we also want to listen to the mouse enter event to know when the user has hovered over the image with their mouse. With that, we can use the host listener decorator, pass in the DOM event that we wanna listen to, and then define a function to handle this event.
In this case, what we wanna do is really simple. Just increase the width from 200 to 300. Now we'll switch back to the HTML in our component and we currently have an image in there that displays the boat image with a width of 200. Let's go ahead and take this out and replace it with the app magnifier directive.
graphic design
If we go back to our app and hover over the images, you'll see that they're resized as soon as we hover over them. Not the most useful thing in the world, but you get the idea of how you can use components and directives together to write really dry reusable code. There's another mechanism in Angular that helps us write reusable code called pipes. A pipe is always used in an interpolated value in the HTML. So so let's imagine we have a big number here, we can use the built in number pipe to round this down to 3 decimals. Angular has some useful built in pipes, but the real power comes when you building your own custom pipes. And chances are somebody's already written the code that you need for your use case, so make sure to check out the AngularPipes GitHub repo for a full list of examples.
Like there's one really special pipe that I wanna talk about now, which is the async pipe. In web application, you're commonly fetching data as a promise or an observable, and the async pipe allows you to do this automatically in a predictable way directly in the HTML. In this example, I'm converting our boats array into an observable by using the RX JS of method.
programming
So now it becomes an observable object, so our regular ng for loop isn't going to work. What we can do is simply add the async pipe to our for loop, and now it's going to convert that observable to an array by subscribing to it, and in addition, it also unsubscribes when this component is destroyed. That's a whole another subject on RxJS, but just know that it's a very useful mechanism for simplifying your Angular code. In a real app, we'd probably be fetching these boats asynchronously from a database, and the async pipe allows us to treat them more like a synchronous plain JavaScript array. At its core, a pipe is very simple. It's just a function that takes in a value and then spits out another value. Each of our boats has a year property on it. Let's say we want to only display the last 2 digits in that 4 digit year. All all we have to do is go into our custom pipe and then implement this transform method. The value represents whatever value is inside the handlebar syntax in your HTML, then the value you return is what you want to be shown in the HTML. In this case, we'll convert the number to a string and then grab the last two elements on that string. Then we can go add it to the boat year in our HTML.
And then if we reopen the app, we'll see that we only get the last two numbers on the year. So so now that you know a lot about components, pipes, and directives, I want to talk about a concept that's really important for Angular developers and that's never touch the DOM.
software development
If you're an experienced JavaScript developer, you're probably used to doing something like this where you call document query selector, then grab some element in the DOM and change its inner HTML. And when you're building a progressive web app, this code will work perfectly fine because the DOM exists in a web app. But if you write code like this and you ever wanna do server side rendering or build a native mobile app. This code will not work because the DOM does not exist on other platforms. So now you know why the use of libraries like jQuery are generally discouraged in Angular. Now let's switch gears into the component life cycle. A component is just a class, so the very first thing to happen in its life cycle is the constructor is fired. But components have relationships with other components and they have bindings that are initialized in the HTML, so things get a little bit more complex. In Angular, you typically don't do anything in the constructor except add your dependencies. And that's because your property bindings aren't guaranteed to be available until you run ng on init, which is the first time change detection runs in this component. So the on a net life cycle hook is where you do all of your setup. Maybe you're fetching data from an API or you're setting up a reactive form or something along those lines. I'll go ahead and add our boats observable to n g on a net just to simulate it coming from a database or API. The the very last thing to happen to a component is that it's destroyed, which triggers the on destroy life cycle hook.
This is where you would do any tear down for your component an Angular that is commonly unsubscribing from an observable to prevent things like memory leaks and performance issues. On init is by far the most common hook that you'll use, but if you have child views inside of your component, you might also wanna use after view init which will ensure that your child views are it as well.
animation
Now that segues into a really important concept in Angular which is change detection. Behind the scenes, Angular is using something called Zone JS that will listen for any events or asynchronous activity in your app and then re render components as needed. You can determine when change detection is happening by using this do check life cycle hook. You wouldn't normally use this to do anything significant, but it is useful for debugging at times. If you're building an interactive app, this life cycle hook will be triggered constantly. You can see we get the 1st console log when the component is initialized. That's when the NG on a net life cycle hook runs. And then as we hover around, different events take place and that triggers change detection and the console log in the browser. So now I want to segue into a concept that is also common in other JavaScript frameworks like React and Vue, and that's marked components versus dumb components, or also commonly called stateful versus stateless or container versus presentational.
And basically all this boils down to is a separation of concerns to make your code predictable. A smart component is generally a page or container that controls how things work throughout the app, while the dumb component is only concerned with presentation logic. I've generated a new component called boat that will be our dumb component. It's going to take the data from this n g four loop and extract it into its own isolated presentational component. This allows the parent component to focus on more low level things like synchronizing the state of the app and fetching the items from the database. As your app grows in complexity, this just becomes an easier way to rationalize what's happening in your code. So the home component is a container that fetches the data while the boat component is only concerned with presenting the data in the UI. Like there's a ton of other things we can talk about with Angular Components, but many of those you'll see in practice as we build out different features on this channel. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And if you wanna build more advanced real world features, consider becoming a pro member at angularfirebase.com. You'll get exclusive pro videos every week plus a copy of the Angular Firebase Survival Guide. Thanks for watching, and I'll talk to you soon.
youtube
infrastructure
data
databases
visualization
data management
artificial intelligence
systems
Components are like the Lego pieces of an Angular application. If you don't know how to put them together properly, you're not gonna be able to build anything cool. Over the next 10 minutes or so, I'll show you all of the basics in Angular Components and how to piece them together in an application. This video is beginner level, so if you know a little bit about JavaScript and web development, you should be okay. If you're new to the channel, make sure to like and subscribe and grab the full write up from angularfirebase.com. The first question we need to answer is what is a component in the first place? And I think the most simple answer to this question is that it's just a controller for the user interface. As a developer, you write components to control how your app is experienced by end users. To show you this in practice, I'm opening a brand new Angular 6 app that was generated with the CLI. Then I'm generating a new component called home, which you'll notice creates 4 different files in the App Directory. The vast majority of the logic that you'll write will be in the Home component dot TS file. The component itself is just a TypeScript class, but it uses this component decorator to sprinkle in some Angular magic. The most important thing is that it allows us to bind data from this TypeScript file to the HTML template. The first thing I wanna show you is how to bind TypeScript code to your HTML. Let's define a property on this class called clicked that defaults to false. Now let's go into the HTML and let's imagine we have a button that we want to disable after it's been clicked. We can bind our TypeScript data to this attribute in HTML by wrapping it in square brackets. Disabled isn't something Angular provides. It's an actual attribute on the HTML element, which I'm looking at here in the Mozilla documentation. The special thing about Angular is that we can wrap this attribute in square brackets and then bind it to our TypeScript. So so instead of just passing it a boolean value like false, we can actually pass it our clicked property, which we can then toggle on our TypeScript as needed. It's currently set to false, so we should be able to serve our app and the button should be clickable, which it is. If we go into TypeScript and change our clicked property to true, you'll see that the button is now disabled and unclickable. In addition to attributes, we can also bind to events that happen in the HTML. So let's say we wanna change this button to disabled after it's been clicked once. We can use parenthesis to bind to the click event on this button and then we'll pass it a function that will define in our TypeScript to handle this event. Now we can switch back to TypeScript and define this event handler method. We currently have the clicked property set to false, but we want to set that to true once the button is clicked which we can do by calling miss clicked equals true. When we click the button, this handler will fire, and then the button becomes disabled because it flips that property to true. Let's say, you bind to events and attributes in Angular, but one other fundamental thing is interpolation. And basically, all that means is we're taking a raw value from our typescript and rendering it out in the HTML. So for example, let's say we have the title here that shows the Angular version that we're currently running. So the title is just a string value that gets created dynamically, and then we can go into our HTML and use the handlebar syntax to interpolate it into the template. If we reload the browser, it should show us that we're running Angular 6 for this project. So now that we have a working component, how do we actually use it within the context of our Angular application. The most basic way is to declare it in the HTML with its selector which, in this case, is just app dash home. If we go into this project's app component, we can just declare our app home page there and it will be rendered out like it's just a regular HTML element. But we can also load it with the router and have it appear where this router outlet is based on a certain URL path. Check out episode 113 to learn all about the router. But the most basic use cases that we set up a path and then we point this path to our component. If we reload the app in the browser, you'll see it looks exactly the same. But if we open the Augury plugin and go to the router tree, you can see that it's being loaded by the router instead of just the HTML directly. You can also load components dynamically but without changing the route. A common use case would be like a pop up or a modal window. This technique is used frequently in the Ionic framework. For example, the alerts controller will dynamically load an entry component whenever the button is clicked. And lastly, the cool new way to load a component is with Angular Elements which allows you to convert it to a regular web component and then use it outside of Angular completely. So you could just drop it into a regular HTML page which you can learn all about in episode 1 0 2. The next thing we're going to look at are directives and a directive is basically just like a component but without its own HTML or CSS. Instead it attaches to a host element and changes the behavior of it. To demonstrate this, I've added an object called boat with some dummy data to our component. Then. Perhaps the most useful built in directive in Angular is n g f. And any directive that starts with a star means it's a structural directive and controls how elements are rendered in the DOM. In this case, we're attaching n g f to a div and it will only render this div if the right hand side resolves to true. So going back to our Clicks property, we're only going to show this boat data if the button has been clicked. When we open the app, you can see that it looks just like it did before, but when we click the button, it displays our boat data. You'll end up using n g f all the time in Angular, and there's one other directive that that. You'll use very frequently as well, which is n g 4. You can use it to loop over an array of data. So let's imagine we have an array with multiple boats in it. We've already mapped out how we want each boat to be displayed. But instead of using ng if here, we can replace it with ng 4. Then we'll iterate over the boats array by saying let boat of boats. Then the div that this directive is attached to will be rendered for each item in that array. If if we open the app, you can see we now have multiple boats utilizing the same presentation logic. So those are super powerful. But another thing you often want to do is display different CSS classes conditionally based on some logic in your TypeScript. Just as a basic example, let's imagine we have a green and red CSS class. We can use the ng class directive to control which CSS class gets applied to the h one title based on the name of the boat. So we'll pass the directive in object where the left hand side of each object property is the CSS class we want to apply. Then the value or the right side is an expression that resolves to true or false, which in this case will either be boat name equals starfire or boat name equals oracle. Now we get a different color for each title based on this logic. So far, we've only looked at built in directives in Angular, but you can also build your own custom directives. Electives. Let's go ahead and build our own with the Angular CLI by running an ng generate directive which we'll call magnifier that will increase the size of an image when it's hovered over. Overall, this looks pretty similar to a component, but the key difference is that there is no HTML template or CSS styles. Instead, it's used as an attribute on an HTML element. This particular directive will be used to modify the width of an image element. So we can bind to the host element's width by using the host binding decorator. Lighter. Then any image that uses this directive will start with a width of 200. Then we also want to listen to the mouse enter event to know when the user has hovered over the image with their mouse. With that, we can use the host listener decorator, pass in the DOM event that we wanna listen to, and then define a function to handle this event. In this case, what we wanna do is really simple. Just increase the width from 200 to 300. Now we'll switch back to the HTML in our component and we currently have an image in there that displays the boat image with a width of 200. Let's go ahead and take this out and replace it with the app magnifier directive. If we go back to our app and hover over the images, you'll see that they're resized as soon as we hover over them. Not the most useful thing in the world, but you get the idea of how you can use components and directives together to write really dry reusable code. There's another mechanism in Angular that helps us write reusable code called pipes. A pipe is always used in an interpolated value in the HTML. So so let's imagine we have a big number here, we can use the built in number pipe to round this down to 3 decimals. Angular has some useful built in pipes, but the real power comes when you building your own custom pipes. And chances are somebody's already written the code that you need for your use case, so make sure to check out the AngularPipes GitHub repo for a full list of examples. Like there's one really special pipe that I wanna talk about now, which is the async pipe. In web application, you're commonly fetching data as a promise or an observable, and the async pipe allows you to do this automatically in a predictable way directly in the HTML. In this example, I'm converting our boats array into an observable by using the RX JS of method. So now it becomes an observable object, so our regular ng for loop isn't going to work. What we can do is simply add the async pipe to our for loop, and now it's going to convert that observable to an array by subscribing to it, and in addition, it also unsubscribes when this component is destroyed. That's a whole another subject on RxJS, but just know that it's a very useful mechanism for simplifying your Angular code. In a real app, we'd probably be fetching these boats asynchronously from a database, and the async pipe allows us to treat them more like a synchronous plain JavaScript array. At its core, a pipe is very simple. It's just a function that takes in a value and then spits out another value. Each of our boats has a year property on it. Let's say we want to only display the last 2 digits in that 4 digit year. All all we have to do is go into our custom pipe and then implement this transform method. The value represents whatever value is inside the handlebar syntax in your HTML, then the value you return is what you want to be shown in the HTML. In this case, we'll convert the number to a string and then grab the last two elements on that string. Then we can go add it to the boat year in our HTML. And then if we reopen the app, we'll see that we only get the last two numbers on the year. So so now that you know a lot about components, pipes, and directives, I want to talk about a concept that's really important for Angular developers and that's never touch the DOM. If you're an experienced JavaScript developer, you're probably used to doing something like this where you call document query selector, then grab some element in the DOM and change its inner HTML. And when you're building a progressive web app, this code will work perfectly fine because the DOM exists in a web app. But if you write code like this and you ever wanna do server side rendering or build a native mobile app. This code will not work because the DOM does not exist on other platforms. So now you know why the use of libraries like jQuery are generally discouraged in Angular. Now let's switch gears into the component life cycle. A component is just a class, so the very first thing to happen in its life cycle is the constructor is fired. But components have relationships with other components and they have bindings that are initialized in the HTML, so things get a little bit more complex. In Angular, you typically don't do anything in the constructor except add your dependencies. And that's because your property bindings aren't guaranteed to be available until you run ng on init, which is the first time change detection runs in this component. So the on a net life cycle hook is where you do all of your setup. Maybe you're fetching data from an API or you're setting up a reactive form or something along those lines. I'll go ahead and add our boats observable to n g on a net just to simulate it coming from a database or API. The the very last thing to happen to a component is that it's destroyed, which triggers the on destroy life cycle hook. This is where you would do any tear down for your component an Angular that is commonly unsubscribing from an observable to prevent things like memory leaks and performance issues. On init is by far the most common hook that you'll use, but if you have child views inside of your component, you might also wanna use after view init which will ensure that your child views are it as well. Now that segues into a really important concept in Angular which is change detection. Behind the scenes, Angular is using something called Zone JS that will listen for any events or asynchronous activity in your app and then re render components as needed. You can determine when change detection is happening by using this do check life cycle hook. You wouldn't normally use this to do anything significant, but it is useful for debugging at times. If you're building an interactive app, this life cycle hook will be triggered constantly. You can see we get the 1st console log when the component is initialized. That's when the NG on a net life cycle hook runs. And then as we hover around, different events take place and that triggers change detection and the console log in the browser. So now I want to segue into a concept that is also common in other JavaScript frameworks like React and Vue, and that's marked components versus dumb components, or also commonly called stateful versus stateless or container versus presentational. And basically all this boils down to is a separation of concerns to make your code predictable. A smart component is generally a page or container that controls how things work throughout the app, while the dumb component is only concerned with presentation logic. I've generated a new component called boat that will be our dumb component. It's going to take the data from this n g four loop and extract it into its own isolated presentational component. This allows the parent component to focus on more low level things like synchronizing the state of the app and fetching the items from the database. As your app grows in complexity, this just becomes an easier way to rationalize what's happening in your code. So the home component is a container that fetches the data while the boat component is only concerned with presenting the data in the UI. Like there's a ton of other things we can talk about with Angular Components, but many of those you'll see in practice as we build out different features on this channel. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And if you wanna build more advanced real world features, consider becoming a pro member at angularfirebase.com. You'll get exclusive pro videos every week plus a copy of the Angular Firebase Survival Guide. Thanks for watching, and I'll talk to you soon.
Components
components
are
are
like
like
the
the
Lego
lego
pieces
pieces
of
of
an
an
Angular
angular
application.
application
If
if
you
you
don't
don't
know
know
how
how
to
to
put
put
them
them
together
together
properly,
properly
you're
you're
not
not
gonna
gonna
be
be
able
able
to
to
build
build
anything
anything
cool.
cool
Over
over
the
the
next
next
10
10
minutes
minutes
or
or
so,
so
I'll
i'll
show
show
you
you
all
all
of
of
the
the
basics
basics
in
in
Angular
angular
Components
components
and
and
how
how
to
to
piece
piece
them
them
together
together
in
in
an
an
application.
application
This
this
video
video
is
is
beginner
beginner
level,
level
so
so
if
if
you
you
know
know
a
a
little
little
bit
bit
about
about
JavaScript
javascript
and
and
web
web
development,
development
you
you
should
should
be
be
okay.
okay
If
if
you're
you're
new
new
to
to
the
the
channel,
channel
make
make
sure
sure
to
to
like
like
and
and
subscribe
subscribe
and
and
grab
grab
the
the
full
full
write
write
up
up
from
from
angularfirebase.com.
angularfirebase.com
The
the
first
first
question
question
we
we
need
need
to
to
answer
answer
is
is
what
what
is
is
a
a
component
component
in
in
the
the
first
first
place?
place
And
and
I
i
think
think
the
the
most
most
simple
simple
answer
answer
to
to
this
this
question
question
is
is
that
that
it's
it's
just
just
a
a
controller
controller
for
for
the
the
user
user
interface.
interface
As
as
a
a
developer,
developer
you
you
write
write
components
components
to
to
control
control
how
how
your
your
app
app
is
is
experienced
experienced
by
by
end
end
users.
users
To
to
show
show
you
you
this
this
in
in
practice,
practice
I'm
i'm
opening
opening
a
a
brand
brand
new
new
Angular
angular
6
6
app
app
that
that
was
was
generated
generated
with
with
the
the
CLI.
cli
Then
then
I'm
i'm
generating
generating
a
a
new
new
component
component
called
called
home,
home
which
which
you'll
you'll
notice
notice
creates
creates
4
4
different
different
files
files
in
in
the
the
App
app
Directory.
directory
The
the
vast
vast
majority
majority
of
of
the
the
logic
logic
that
that
you'll
you'll
write
write
will
will
be
be
in
in
the
the
Home
home
component
component
dot
dot
TS
ts
file.
file
The
the
component
component
itself
itself
is
is
just
just
a
a
TypeScript
typescript
class,
class
but
but
it
it
uses
uses
this
this
component
component
decorator
decorator
to
to
sprinkle
sprinkle
in
in
some
some
Angular
angular
magic.
magic
The
the
most
most
important
important
thing
thing
is
is
that
that
it
it
allows
allows
us
us
to
to
bind
bind
data
data
from
from
this
this
TypeScript
typescript
file
file
to
to
the
the
HTML
html
template.
template
The
the
first
first
thing
thing
I
i
wanna
wanna
show
show
you
you
is
is
how
how
to
to
bind
bind
TypeScript
typescript
code
code
to
to
your
your
HTML.
html
Let's
let's
define
define
a
a
property
property
on
on
this
this
class
class
called
called
clicked
clicked
that
that
defaults
defaults
to
to
false.
false
Now
now
let's
let's
go
go
into
into
the
the
HTML
html
and
and
let's
let's
imagine
imagine
we
we
have
have
a
a
button
button
that
that
we
we
want
want
to
to
disable
disable
after
after
it's
it's
been
been
clicked.
clicked
We
we
can
can
bind
bind
our
our
TypeScript
typescript
data
data
to
to
this
this
attribute
attribute
in
in
HTML
html
by
by
wrapping
wrapping
it
it
in
in
square
square
brackets.
brackets
Disabled
disabled
isn't
isn't
something
something
Angular
angular
provides.
provides
It's
it's
an
an
actual
actual
attribute
attribute
on
on
the
the
HTML
html
element,
element
which
which
I'm
i'm
looking
looking
at
at
here
here
in
in
the
the
Mozilla
mozilla
documentation.
documentation
The
the
special
special
thing
thing
about
about
Angular
angular
is
is
that
that
we
we
can
can
wrap
wrap
this
this
attribute
attribute
in
in
square
square
brackets
brackets
and
and
then
then
bind
bind
it
it
to
to
our
our
TypeScript.
typescript
So
so
so
so
instead
instead
of
of
just
just
passing
passing
it
it
a
a
boolean
boolean
value
value
like
like
false,
false
we
we
can
can
actually
actually
pass
pass
it
it
our
our
clicked
clicked
property,
property
which
which
we
we
can
can
then
then
toggle
toggle
on
on
our
our
TypeScript
typescript
as
as
needed.
needed
It's
it's
currently
currently
set
set
to
to
false,
false
so
so
we
we
should
should
be
be
able
able
to
to
serve
serve
our
our
app
app
and
and
the
the
button
button
should
should
be
be
clickable,
clickable
which
which
it
it
is.
is
If
if
we
we
go
go
into
into
TypeScript
typescript
and
and
change
change
our
our
clicked
clicked
property
property
to
to
true,
true
you'll
you'll
see
see
that
that
the
the
button
button
is
is
now
now
disabled
disabled
and
and
unclickable.
unclickable
In
in
addition
addition
to
to
attributes,
attributes
we
we
can
can
also
also
bind
bind
to
to
events
events
that
that
happen
happen
in
in
the
the
HTML.
html
So
so
let's
let's
say
say
we
we
wanna
wanna
change
change
this
this
button
button
to
to
disabled
disabled
after
after
it's
it's
been
been
clicked
clicked
once.
once
We
we
can
can
use
use
parenthesis
parenthesis
to
to
bind
bind
to
to
the
the
click
click
event
event
on
on
this
this
button
button
and
and
then
then
we'll
we'll
pass
pass
it
it
a
a
function
function
that
that
will
will
define
define
in
in
our
our
TypeScript
typescript
to
to
handle
handle
this
this
event.
event
Now
now
we
we
can
can
switch
switch
back
back
to
to
TypeScript
typescript
and
and
define
define
this
this
event
event
handler
handler
method.
method
We
we
currently
currently
have
have
the
the
clicked
clicked
property
property
set
set
to
to
false,
false
but
but
we
we
want
want
to
to
set
set
that
that
to
to
true
true
once
once
the
the
button
button
is
is
clicked
clicked
which
which
we
we
can
can
do
do
by
by
calling
calling
miss
miss
clicked
clicked
equals
equals
true.
true
When
when
we
we
click
click
the
the
button,
button
this
this
handler
handler
will
will
fire,
fire
and
and
then
then
the
the
button
button
becomes
becomes
disabled
disabled
because
because
it
it
flips
flips
that
that
property
property
to
to
true.
true
Let's
let's
say,
say
you
you
bind
bind
to
to
events
events
and
and
attributes
attributes
in
in
Angular,
angular
but
but
one
one
other
other
fundamental
fundamental
thing
thing
is
is
interpolation.
interpolation
And
and
basically,
basically
all
all
that
that
means
means
is
is
we're
we're
taking
taking
a
a
raw
raw
value
value
from
from
our
our
typescript
typescript
and
and
rendering
rendering
it
it
out
out
in
in
the
the
HTML.
html
So
so
for
for
example,
example
let's
let's
say
say
we
we
have
have
the
the
title
title
here
here
that
that
shows
shows
the
the
Angular
angular
version
version
that
that
we're
we're
currently
currently
running.
running
So
so
the
the
title
title
is
is
just
just
a
a
string
string
value
value
that
that
gets
gets
created
created
dynamically,
dynamically
and
and
then
then
we
we
can
can
go
go
into
into
our
our
HTML
html
and
and
use
use
the
the
handlebar
handlebar
syntax
syntax
to
to
interpolate
interpolate
it
it
into
into
the
the
template.
template
If
if
we
we
reload
reload
the
the
browser,
browser
it
it
should
should
show
show
us
us
that
that
we're
we're
running
running
Angular
angular
6
6
for
for
this
this
project.
project
So
so
now
now
that
that
we
we
have
have
a
a
working
working
component,
component
how
how
do
do
we
we
actually
actually
use
use
it
it
within
within
the
the
context
context
of
of
our
our
Angular
angular
application.
application
The
the
most
most
basic
basic
way
way
is
is
to
to
declare
declare
it
it
in
in
the
the
HTML
html
with
with
its
its
selector
selector
which,
which
in
in
this
this
case,
case
is
is
just
just
app
app
dash
dash
home.
home
If
if
we
we
go
go
into
into
this
this
project's
project's
app
app
component,
component
we
we
can
can
just
just
declare
declare
our
our
app
app
home
home
page
page
there
there
and
and
it
it
will
will
be
be
rendered
rendered
out
out
like
like
it's
it's
just
just
a
a
regular
regular
HTML
html
element.
element
But
but
we
we
can
can
also
also
load
load
it
it
with
with
the
the
router
router
and
and
have
have
it
it
appear
appear
where
where
this
this
router
router
outlet
outlet
is
is
based
based
on
on
a
a
certain
certain
URL
url
path.
path
Check
check
out
out
episode
episode
113
113
to
to
learn
learn
all
all
about
about
the
the
router.
router
But
but
the
the
most
most
basic
basic
use
use
cases
cases
that
that
we
we
set
set
up
up
a
a
path
path
and
and
then
then
we
we
point
point
this
this
path
path
to
to
our
our
component.
component
If
if
we
we
reload
reload
the
the
app
app
in
in
the
the
browser,
browser
you'll
you'll
see
see
it
it
looks
looks
exactly
exactly
the
the
same.
same
But
but
if
if
we
we
open
open
the
the
Augury
augury
plugin
plugin
and
and
go
go
to
to
the
the
router
router
tree,
tree
you
you
can
can
see
see
that
that
it's
it's
being
being
loaded
loaded
by
by
the
the
router
router
instead
instead
of
of
just
just
the
the
HTML
html
directly.
directly
You
you
can
can
also
also
load
load
components
components
dynamically
dynamically
but
but
without
without
changing
changing
the
the
route.
route
A
a
common
common
use
use
case
case
would
would
be
be
like
like
a
a
pop
pop
up
up
or
or
a
a
modal
modal
window.
window
This
this
technique
technique
is
is
used
used
frequently
frequently
in
in
the
the
Ionic
ionic
framework.
framework
For
for
example,
example
the
the
alerts
alerts
controller
controller
will
will
dynamically
dynamically
load
load
an
an
entry
entry
component
component
whenever
whenever
the
the
button
button
is
is
clicked.
clicked
And
and
lastly,
lastly
the
the
cool
cool
new
new
way
way
to
to
load
load
a
a
component
component
is
is
with
with
Angular
angular
Elements
elements
which
which
allows
allows
you
you
to
to
convert
convert
it
it
to
to
a
a
regular
regular
web
web
component
component
and
and
then
then
use
use
it
it
outside
outside
of
of
Angular
angular
completely.
completely
So
so
you
you
could
could
just
just
drop
drop
it
it
into
into
a
a
regular
regular
HTML
html
page
page
which
which
you
you
can
can
learn
learn
all
all
about
about
in
in
episode
episode
1
1
0
0
2.
2
The
the
next
next
thing
thing
we're
we're
going
going
to
to
look
look
at
at
are
are
directives
directives
and
and
a
a
directive
directive
is
is
basically
basically
just
just
like
like
a
a
component
component
but
but
without
without
its
its
own
own
HTML
html
or
or
CSS.
css
Instead
instead
it
it
attaches
attaches
to
to
a
a
host
host
element
element
and
and
changes
changes
the
the
behavior
behavior
of
of
it.
it
To
to
demonstrate
demonstrate
this,
this
I've
i've
added
added
an
an
object
object
called
called
boat
boat
with
with
some
some
dummy
dummy
data
data
to
to
our
our
component.
component
Then.
then
Perhaps
perhaps
the
the
most
most
useful
useful
built
built
in
in
directive
directive
in
in
Angular
angular
is
is
n
n
g
g
f.
f
And
and
any
any
directive
directive
that
that
starts
starts
with
with
a
a
star
star
means
means
it's
it's
a
a
structural
structural
directive
directive
and
and
controls
controls
how
how
elements
elements
are
are
rendered
rendered
in
in
the
the
DOM.
dom
In
in
this
this
case,
case
we're
we're
attaching
attaching
n
n
g
g
f
f
to
to
a
a
div
div
and
and
it
it
will
will
only
only
render
render
this
this
div
div
if
if
the
the
right
right
hand
hand
side
side
resolves
resolves
to
to
true.
true
So
so
going
going
back
back
to
to
our
our
Clicks
clicks
property,
property
we're
we're
only
only
going
going
to
to
show
show
this
this
boat
boat
data
data
if
if
the
the
button
button
has
has
been
been
clicked.
clicked
When
when
we
we
open
open
the
the
app,
app
you
you
can
can
see
see
that
that
it
it
looks
looks
just
just
like
like
it
it
did
did
before,
before
but
but
when
when
we
we
click
click
the
the
button,
button
it
it
displays
displays
our
our
boat
boat
data.
data
You'll
you'll
end
end
up
up
using
using
n
n
g
g
f
f
all
all
the
the
time
time
in
in
Angular,
angular
and
and
there's
there's
one
one
other
other
directive
directive
that
that
that.
that
You'll
you'll
use
use
very
very
frequently
frequently
as
as
well,
well
which
which
is
is
n
n
g
g
4.
4
You
you
can
can
use
use
it
it
to
to
loop
loop
over
over
an
an
array
array
of
of
data.
data
So
so
let's
let's
imagine
imagine
we
we
have
have
an
an
array
array
with
with
multiple
multiple
boats
boats
in
in
it.
it
We've
we've
already
already
mapped
mapped
out
out
how
how
we
we
want
want
each
each
boat
boat
to
to
be
be
displayed.
displayed
But
but
instead
instead
of
of
using
using
ng
ng
if
if
here,
here
we
we
can
can
replace
replace
it
it
with
with
ng
ng
4.
4
Then
then
we'll
we'll
iterate
iterate
over
over
the
the
boats
boats
array
array
by
by
saying
saying
let
let
boat
boat
of
of
boats.
boats
Then
then
the
the
div
div
that
that
this
this
directive
directive
is
is
attached
attached
to
to
will
will
be
be
rendered
rendered
for
for
each
each
item
item
in
in
that
that
array.
array
If
if
if
if
we
we
open
open
the
the
app,
app
you
you
can
can
see
see
we
we
now
now
have
have
multiple
multiple
boats
boats
utilizing
utilizing
the
the
same
same
presentation
presentation
logic.
logic
So
so
those
those
are
are
super
super
powerful.
powerful
But
but
another
another
thing
thing
you
you
often
often
want
want
to
to
do
do
is
is
display
display
different
different
CSS
css
classes
classes
conditionally
conditionally
based
based
on
on
some
some
logic
logic
in
in
your
your
TypeScript.
typescript
Just
just
as
as
a
a
basic
basic
example,
example
let's
let's
imagine
imagine
we
we
have
have
a
a
green
green
and
and
red
red
CSS
css
class.
class
We
we
can
can
use
use
the
the
ng
ng
class
class
directive
directive
to
to
control
control
which
which
CSS
css
class
class
gets
gets
applied
applied
to
to
the
the
h
h
one
one
title
title
based
based
on
on
the
the
name
name
of
of
the
the
boat.
boat
So
so
we'll
we'll
pass
pass
the
the
directive
directive
in
in
object
object
where
where
the
the
left
left
hand
hand
side
side
of
of
each
each
object
object
property
property
is
is
the
the
CSS
css
class
class
we
we
want
want
to
to
apply.
apply
Then
then
the
the
value
value
or
or
the
the
right
right
side
side
is
is
an
an
expression
expression
that
that
resolves
resolves
to
to
true
true
or
or
false,
false
which
which
in
in
this
this
case
case
will
will
either
either
be
be
boat
boat
name
name
equals
equals
starfire
starfire
or
or
boat
boat
name
name
equals
equals
oracle.
oracle
Now
now
we
we
get
get
a
a
different
different
color
color
for
for
each
each
title
title
based
based
on
on
this
this
logic.
logic
So
so
far,
far
we've
we've
only
only
looked
looked
at
at
built
built
in
in
directives
directives
in
in
Angular,
angular
but
but
you
you
can
can
also
also
build
build
your
your
own
own
custom
custom
directives.
directives
Electives.
electives
Let's
let's
go
go
ahead
ahead
and
and
build
build
our
our
own
own
with
with
the
the
Angular
angular
CLI
cli
by
by
running
running
an
an
ng
ng
generate
generate
directive
directive
which
which
we'll
we'll
call
call
magnifier
magnifier
that
that
will
will
increase
increase
the
the
size
size
of
of
an
an
image
image
when
when
it's
it's
hovered
hovered
over.
over
Overall,
overall
this
this
looks
looks
pretty
pretty
similar
similar
to
to
a
a
component,
component
but
but
the
the
key
key
difference
difference
is
is
that
that
there
there
is
is
no
no
HTML
html
template
template
or
or
CSS
css
styles.
styles
Instead,
instead
it's
it's
used
used
as
as
an
an
attribute
attribute
on
on
an
an
HTML
html
element.
element
This
this
particular
particular
directive
directive
will
will
be
be
used
used
to
to
modify
modify
the
the
width
width
of
of
an
an
image
image
element.
element
So
so
we
we
can
can
bind
bind
to
to
the
the
host
host
element's
element's
width
width
by
by
using
using
the
the
host
host
binding
binding
decorator.
decorator
Lighter.
lighter
Then
then
any
any
image
image
that
that
uses
uses
this
this
directive
directive
will
will
start
start
with
with
a
a
width
width
of
of
200.
200
Then
then
we
we
also
also
want
want
to
to
listen
listen
to
to
the
the
mouse
mouse
enter
enter
event
event
to
to
know
know
when
when
the
the
user
user
has
has
hovered
hovered
over
over
the
the
image
image
with
with
their
their
mouse.
mouse
With
with
that,
that
we
we
can
can
use
use
the
the
host
host
listener
listener
decorator,
decorator
pass
pass
in
in
the
the
DOM
dom
event
event
that
that
we
we
wanna
wanna
listen
listen
to,
to
and
and
then
then
define
define
a
a
function
function
to
to
handle
handle
this
this
event.
event
In
in
this
this
case,
case
what
what
we
we
wanna
wanna
do
do
is
is
really
really
simple.
simple
Just
just
increase
increase
the
the
width
width
from
from
200
200
to
to
300.
300
Now
now
we'll
we'll
switch
switch
back
back
to
to
the
the
HTML
html
in
in
our
our
component
component
and
and
we
we
currently
currently
have
have
an
an
image
image
in
in
there
there
that
that
displays
displays
the
the
boat
boat
image
image
with
with
a
a
width
width
of
of
200.
200
Let's
let's
go
go
ahead
ahead
and
and
take
take
this
this
out
out
and
and
replace
replace
it
it
with
with
the
the
app
app
magnifier
magnifier
directive.
directive
If
if
we
we
go
go
back
back
to
to
our
our
app
app
and
and
hover
hover
over
over
the
the
images,
images
you'll
you'll
see
see
that
that
they're
they're
resized
resized
as
as
soon
soon
as
as
we
we
hover
hover
over
over
them.
them
Not
not
the
the
most
most
useful
useful
thing
thing
in
in
the
the
world,
world
but
but
you
you
get
get
the
the
idea
idea
of
of
how
how
you
you
can
can
use
use
components
components
and
and
directives
directives
together
together
to
to
write
write
really
really
dry
dry
reusable
reusable
code.
code
There's
there's
another
another
mechanism
mechanism
in
in
Angular
angular
that
that
helps
helps
us
us
write
write
reusable
reusable
code
code
called
called
pipes.
pipes
A
a
pipe
pipe
is
is
always
always
used
used
in
in
an
an
interpolated
interpolated
value
value
in
in
the
the
HTML.
html
So
so
so
so
let's
let's
imagine
imagine
we
we
have
have
a
a
big
big
number
number
here,
here
we
we
can
can
use
use
the
the
built
built
in
in
number
number
pipe
pipe
to
to
round
round
this
this
down
down
to
to
3
3
decimals.
decimals
Angular
angular
has
has
some
some
useful
useful
built
built
in
in
pipes,
pipes
but
but
the
the
real
real
power
power
comes
comes
when
when
you
you
building
building
your
your
own
own
custom
custom
pipes.
pipes
And
and
chances
chances
are
are
somebody's
somebody's
already
already
written
written
the
the
code
code
that
that
you
you
need
need
for
for
your
your
use
use
case,
case
so
so
make
make
sure
sure
to
to
check
check
out
out
the
the
AngularPipes
angularpipes
GitHub
github
repo
repo
for
for
a
a
full
full
list
list
of
of
examples.
examples
Like
like
there's
there's
one
one
really
really
special
special
pipe
pipe
that
that
I
i
wanna
wanna
talk
talk
about
about
now,
now
which
which
is
is
the
the
async
async
pipe.
pipe
In
in
web
web
application,
application
you're
you're
commonly
commonly
fetching
fetching
data
data
as
as
a
a
promise
promise
or
or
an
an
observable,
observable
and
and
the
the
async
async
pipe
pipe
allows
allows
you
you
to
to
do
do
this
this
automatically
automatically
in
in
a
a
predictable
predictable
way
way
directly
directly
in
in
the
the
HTML.
html
In
in
this
this
example,
example
I'm
i'm
converting
converting
our
our
boats
boats
array
array
into
into
an
an
observable
observable
by
by
using
using
the
the
RX
rx
JS
js
of
of
method.
method
So
so
now
now
it
it
becomes
becomes
an
an
observable
observable
object,
object
so
so
our
our
regular
regular
ng
ng
for
for
loop
loop
isn't
isn't
going
going
to
to
work.
work
What
what
we
we
can
can
do
do
is
is
simply
simply
add
add
the
the
async
async
pipe
pipe
to
to
our
our
for
for
loop,
loop
and
and
now
now
it's
it's
going
going
to
to
convert
convert
that
that
observable
observable
to
to
an
an
array
array
by
by
subscribing
subscribing
to
to
it,
it
and
and
in
in
addition,
addition
it
it
also
also
unsubscribes
unsubscribes
when
when
this
this
component
component
is
is
destroyed.
destroyed
That's
that's
a
a
whole
whole
another
another
subject
subject
on
on
RxJS,
rxjs
but
but
just
just
know
know
that
that
it's
it's
a
a
very
very
useful
useful
mechanism
mechanism
for
for
simplifying
simplifying
your
your
Angular
angular
code.
code
In
in
a
a
real
real
app,
app
we'd
we'd
probably
probably
be
be
fetching
fetching
these
these
boats
boats
asynchronously
asynchronously
from
from
a
a
database,
database
and
and
the
the
async
async
pipe
pipe
allows
allows
us
us
to
to
treat
treat
them
them
more
more
like
like
a
a
synchronous
synchronous
plain
plain
JavaScript
javascript
array.
array
At
at
its
its
core,
core
a
a
pipe
pipe
is
is
very
very
simple.
simple
It's
it's
just
just
a
a
function
function
that
that
takes
takes
in
in
a
a
value
value
and
and
then
then
spits
spits
out
out
another
another
value.
value
Each
each
of
of
our
our
boats
boats
has
has
a
a
year
year
property
property
on
on
it.
it
Let's
let's
say
say
we
we
want
want
to
to
only
only
display
display
the
the
last
last
2
2
digits
digits
in
in
that
that
4
4
digit
digit
year.
year
All
all
all
all
we
we
have
have
to
to
do
do
is
is
go
go
into
into
our
our
custom
custom
pipe
pipe
and
and
then
then
implement
implement
this
this
transform
transform
method.
method
The
the
value
value
represents
represents
whatever
whatever
value
value
is
is
inside
inside
the
the
handlebar
handlebar
syntax
syntax
in
in
your
your
HTML,
html
then
then
the
the
value
value
you
you
return
return
is
is
what
what
you
you
want
want
to
to
be
be
shown
shown
in
in
the
the
HTML.
html
In
in
this
this
case,
case
we'll
we'll
convert
convert
the
the
number
number
to
to
a
a
string
string
and
and
then
then
grab
grab
the
the
last
last
two
two
elements
elements
on
on
that
that
string.
string
Then
then
we
we
can
can
go
go
add
add
it
it
to
to
the
the
boat
boat
year
year
in
in
our
our
HTML.
html
And
and
then
then
if
if
we
we
reopen
reopen
the
the
app,
app
we'll
we'll
see
see
that
that
we
we
only
only
get
get
the
the
last
last
two
two
numbers
numbers
on
on
the
the
year.
year
So
so
so
so
now
now
that
that
you
you
know
know
a
a
lot
lot
about
about
components,
components
pipes,
pipes
and
and
directives,
directives
I
i
want
want
to
to
talk
talk
about
about
a
a
concept
concept
that's
that's
really
really
important
important
for
for
Angular
angular
developers
developers
and
and
that's
that's
never
never
touch
touch
the
the
DOM.
dom
If
if
you're
you're
an
an
experienced
experienced
JavaScript
javascript
developer,
developer
you're
you're
probably
probably
used
used
to
to
doing
doing
something
something
like
like
this
this
where
where
you
you
call
call
document
document
query
query
selector,
selector
then
then
grab
grab
some
some
element
element
in
in
the
the
DOM
dom
and
and
change
change
its
its
inner
inner
HTML.
html
And
and
when
when
you're
you're
building
building
a
a
progressive
progressive
web
web
app,
app
this
this
code
code
will
will
work
work
perfectly
perfectly
fine
fine
because
because
the
the
DOM
dom
exists
exists
in
in
a
a
web
web
app.
app
But
but
if
if
you
you
write
write
code
code
like
like
this
this
and
and
you
you
ever
ever
wanna
wanna
do
do
server
server
side
side
rendering
rendering
or
or
build
build
a
a
native
native
mobile
mobile
app.
app
This
this
code
code
will
will
not
not
work
work
because
because
the
the
DOM
dom
does
does
not
not
exist
exist
on
on
other
other
platforms.
platforms
So
so
now
now
you
you
know
know
why
why
the
the
use
use
of
of
libraries
libraries
like
like
jQuery
jquery
are
are
generally
generally
discouraged
discouraged
in
in
Angular.
angular
Now
now
let's
let's
switch
switch
gears
gears
into
into
the
the
component
component
life
life
cycle.
cycle
A
a
component
component
is
is
just
just
a
a
class,
class
so
so
the
the
very
very
first
first
thing
thing
to
to
happen
happen
in
in
its
its
life
life
cycle
cycle
is
is
the
the
constructor
constructor
is
is
fired.
fired
But
but
components
components
have
have
relationships
relationships
with
with
other
other
components
components
and
and
they
they
have
have
bindings
bindings
that
that
are
are
initialized
initialized
in
in
the
the
HTML,
html
so
so
things
things
get
get
a
a
little
little
bit
bit
more
more
complex.
complex
In
in
Angular,
angular
you
you
typically
typically
don't
don't
do
do
anything
anything
in
in
the
the
constructor
constructor
except
except
add
add
your
your
dependencies.
dependencies
And
and
that's
that's
because
because
your
your
property
property
bindings
bindings
aren't
aren't
guaranteed
guaranteed
to
to
be
be
available
available
until
until
you
you
run
run
ng
ng
on
on
init,
init
which
which
is
is
the
the
first
first
time
time
change
change
detection
detection
runs
runs
in
in
this
this
component.
component
So
so
the
the
on
on
a
a
net
net
life
life
cycle
cycle
hook
hook
is
is
where
where
you
you
do
do
all
all
of
of
your
your
setup.
setup
Maybe
maybe
you're
you're
fetching
fetching
data
data
from
from
an
an
API
api
or
or
you're
you're
setting
setting
up
up
a
a
reactive
reactive
form
form
or
or
something
something
along
along
those
those
lines.
lines
I'll
i'll
go
go
ahead
ahead
and
and
add
add
our
our
boats
boats
observable
observable
to
to
n
n
g
g
on
on
a
a
net
net
just
just
to
to
simulate
simulate
it
it
coming
coming
from
from
a
a
database
database
or
or
API.
api
The
the
the
the
very
very
last
last
thing
thing
to
to
happen
happen
to
to
a
a
component
component
is
is
that
that
it's
it's
destroyed,
destroyed
which
which
triggers
triggers
the
the
on
on
destroy
destroy
life
life
cycle
cycle
hook.
hook
This
this
is
is
where
where
you
you
would
would
do
do
any
any
tear
tear
down
down
for
for
your
your
component
component
an
an
Angular
angular
that
that
is
is
commonly
commonly
unsubscribing
unsubscribing
from
from
an
an
observable
observable
to
to
prevent
prevent
things
things
like
like
memory
memory
leaks
leaks
and
and
performance
performance
issues.
issues
On
on
init
init
is
is
by
by
far
far
the
the
most
most
common
common
hook
hook
that
that
you'll
you'll
use,
use
but
but
if
if
you
you
have
have
child
child
views
views
inside
inside
of
of
your
your
component,
component
you
you
might
might
also
also
wanna
wanna
use
use
after
after
view
view
init
init
which
which
will
will
ensure
ensure
that
that
your
your
child
child
views
views
are
are
it
it
as
as
well.
well
Now
now
that
that
segues
segues
into
into
a
a
really
really
important
important
concept
concept
in
in
Angular
angular
which
which
is
is
change
change
detection.
detection
Behind
behind
the
the
scenes,
scenes
Angular
angular
is
is
using
using
something
something
called
called
Zone
zone
JS
js
that
that
will
will
listen
listen
for
for
any
any
events
events
or
or
asynchronous
asynchronous
activity
activity
in
in
your
your
app
app
and
and
then
then
re
re
render
render
components
components
as
as
needed.
needed
You
you
can
can
determine
determine
when
when
change
change
detection
detection
is
is
happening
happening
by
by
using
using
this
this
do
do
check
check
life
life
cycle
cycle
hook.
hook
You
you
wouldn't
wouldn't
normally
normally
use
use
this
this
to
to
do
do
anything
anything
significant,
significant
but
but
it
it
is
is
useful
useful
for
for
debugging
debugging
at
at
times.
times
If
if
you're
you're
building
building
an
an
interactive
interactive
app,
app
this
this
life
life
cycle
cycle
hook
hook
will
will
be
be
triggered
triggered
constantly.
constantly
You
you
can
can
see
see
we
we
get
get
the
the
1st
1st
console
console
log
log
when
when
the
the
component
component
is
is
initialized.
initialized
That's
that's
when
when
the
the
NG
ng
on
on
a
a
net
net
life
life
cycle
cycle
hook
hook
runs.
runs
And
and
then
then
as
as
we
we
hover
hover
around,
around
different
different
events
events
take
take
place
place
and
and
that
that
triggers
triggers
change
change
detection
detection
and
and
the
the
console
console
log
log
in
in
the
the
browser.
browser
So
so
now
now
I
i
want
want
to
to
segue
segue
into
into
a
a
concept
concept
that
that
is
is
also
also
common
common
in
in
other
other
JavaScript
javascript
frameworks
frameworks
like
like
React
react
and
and
Vue,
vue
and
and
that's
that's
marked
marked
components
components
versus
versus
dumb
dumb
components,
components
or
or
also
also
commonly
commonly
called
called
stateful
stateful
versus
versus
stateless
stateless
or
or
container
container
versus
versus
presentational.
presentational
And
and
basically
basically
all
all
this
this
boils
boils
down
down
to
to
is
is
a
a
separation
separation
of
of
concerns
concerns
to
to
make
make
your
your
code
code
predictable.
predictable
A
a
smart
smart
component
component
is
is
generally
generally
a
a
page
page
or
or
container
container
that
that
controls
controls
how
how
things
things
work
work
throughout
throughout
the
the
app,
app
while
while
the
the
dumb
dumb
component
component
is
is
only
only
concerned
concerned
with
with
presentation
presentation
logic.
logic
I've
i've
generated
generated
a
a
new
new
component
component
called
called
boat
boat
that
that
will
will
be
be
our
our
dumb
dumb
component.
component
It's
it's
going
going
to
to
take
take
the
the
data
data
from
from
this
this
n
n
g
g
four
four
loop
loop
and
and
extract
extract
it
it
into
into
its
its
own
own
isolated
isolated
presentational
presentational
component.
component
This
this
allows
allows
the
the
parent
parent
component
component
to
to
focus
focus
on
on
more
more
low
low
level
level
things
things
like
like
synchronizing
synchronizing
the
the
state
state
of
of
the
the
app
app
and
and
fetching
fetching
the
the
items
items
from
from
the
the
database.
database
As
as
your
your
app
app
grows
grows
in
in
complexity,
complexity
this
this
just
just
becomes
becomes
an
an
easier
easier
way
way
to
to
rationalize
rationalize
what's
what's
happening
happening
in
in
your
your
code.
code
So
so
the
the
home
home
component
component
is
is
a
a
container
container
that
that
fetches
fetches
the
the
data
data
while
while
the
the
boat
boat
component
component
is
is
only
only
concerned
concerned
with
with
presenting
presenting
the
the
data
data
in
in
the
the
UI.
ui
Like
like
there's
there's
a
a
ton
ton
of
of
other
other
things
things
we
we
can
can
talk
talk
about
about
with
with
Angular
angular
Components,
components
but
but
many
many
of
of
those
those
you'll
you'll
see
see
in
in
practice
practice
as
as
we
we
build
build
out
out
different
different
features
features
on
on
this
this
channel.
channel
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
wanna
wanna
build
build
more
more
advanced
advanced
real
real
world
world
features,
features
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase.com.
angularfirebase.com
You'll
you'll
get
get
exclusive
exclusive
pro
pro
videos
videos
every
every
week
week
plus
plus
a
a
copy
copy
of
of
the
the
Angular
angular
Firebase
firebase
Survival
survival
Guide.
guide
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
talk
talk
to
to
you
you
soon.
soon
success
The speakers discuss the basics of Angular Components and how to use them in applications. They explain how to write components, connect objects, and use the function before click to disable a button. They also discuss the use of TypeScript, websites, and apps, including dynamic hook and live cycle hook, and the importance of creating a smart component for app development. The speakers provide examples and explain the process of attaching objects and adjusting image width.
Angular Components Beginner's Guide
Components are like the Lego pieces of an Angular application. If you don't know how to put them together properly, you're not gonna be able to build anything cool. Over the next 10 minutes or so, I'll show you all of the basics in Angular Components and how to piece them together in an application. This video is beginner level, so if you know a little bit about JavaScript and web development, you should be okay. If you're new to the channel, make sure to like and subscribe and grab the full write up from angularfirebase.com. The first question we need to answer is what is a component in the first place? And I think the most simple answer to this question is that it's just a controller for the user interface. As a developer, you write components to control how your app is experienced by end users. To show you this in practice, I'm opening a brand new Angular 6 app that was generated with the CLI. Then I'm generating a new component called home, which you'll notice creates 4 different files in the App Directory. The vast majority of the logic that you'll write will be in the Home component dot TS file. The component itself is just a TypeScript class, but it uses this component decorator to sprinkle in some Angular magic. The most important thing is that it allows us to bind data from this TypeScript file to the HTML template. The first thing I wanna show you is how to bind TypeScript code to your HTML. Let's define a property on this class called clicked that defaults to false. Now let's go into the HTML and let's imagine we have a button that we want to disable after it's been clicked. We can bind our TypeScript data to this attribute in HTML by wrapping it in square brackets. Disabled isn't something Angular provides. It's an actual attribute on the HTML element, which I'm looking at here in the Mozilla documentation. The special thing about Angular is that we can wrap this attribute in square brackets and then bind it to our TypeScript. So so instead of just passing it a boolean value like false, we can actually pass it our clicked property, which we can then toggle on our TypeScript as needed. It's currently set to false, so we should be able to serve our app and the button should be clickable, which it is. If we go into TypeScript and change our clicked property to true, you'll see that the button is now disabled and unclickable. In addition to attributes, we can also bind to events that happen in the HTML. So let's say we wanna change this button to disabled after it's been clicked once. We can use parenthesis to bind to the click event on this button and then we'll pass it a function that will define in our TypeScript to handle this event. Now we can switch back to TypeScript and define this event handler method. We currently have the clicked property set to false, but we want to set that to true once the button is clicked which we can do by calling miss clicked equals true. When we click the button, this handler will fire, and then the button becomes disabled because it flips that property to true. Let's say, you bind to events and attributes in Angular, but one other fundamental thing is interpolation. And basically, all that means is we're taking a raw value from our typescript and rendering it out in the HTML. So for example, let's say we have the title here that shows the Angular version that we're currently running. So the title is just a string value that gets created dynamically, and then we can go into our HTML and use the handlebar syntax to interpolate it into the template. If we reload the browser, it should show us that we're running Angular 6 for this project. So now that we have a working component, how do we actually use it within the context of our Angular application. The most basic way is to declare it in the HTML with its selector which, in this case, is just app dash home. If we go into this project's app component, we can just declare our app home page there and it will be rendered out like it's just a regular HTML element. But we can also load it with the router and have it appear where this router outlet is based on a certain URL path. Check out episode 113 to learn all about the router. But the most basic use cases that we set up a path and then we point this path to our component. If we reload the app in the browser, you'll see it looks exactly the same. But if we open the Augury plugin and go to the router tree, you can see that it's being loaded by the router instead of just the HTML directly. You can also load components dynamically but without changing the route. A common use case would be like a pop up or a modal window. This technique is used frequently in the Ionic framework. For example, the alerts controller will dynamically load an entry component whenever the button is clicked. And lastly, the cool new way to load a component is with Angular Elements which allows you to convert it to a regular web component and then use it outside of Angular completely. So you could just drop it into a regular HTML page which you can learn all about in episode 1 0 2. The next thing we're going to look at are directives and a directive is basically just like a component but without its own HTML or CSS. Instead it attaches to a host element and changes the behavior of it. To demonstrate this, I've added an object called boat with some dummy data to our component. Then. Perhaps the most useful built in directive in Angular is n g f. And any directive that starts with a star means it's a structural directive and controls how elements are rendered in the DOM. In this case, we're attaching n g f to a div and it will only render this div if the right hand side resolves to true. So going back to our Clicks property, we're only going to show this boat data if the button has been clicked. When we open the app, you can see that it looks just like it did before, but when we click the button, it displays our boat data. You'll end up using n g f all the time in Angular, and there's one other directive that that. You'll use very frequently as well, which is n g 4. You can use it to loop over an array of data. So let's imagine we have an array with multiple boats in it. We've already mapped out how we want each boat to be displayed. But instead of using ng if here, we can replace it with ng 4. Then we'll iterate over the boats array by saying let boat of boats. Then the div that this directive is attached to will be rendered for each item in that array. If if we open the app, you can see we now have multiple boats utilizing the same presentation logic. So those are super powerful. But another thing you often want to do is display different CSS classes conditionally based on some logic in your TypeScript. Just as a basic example, let's imagine we have a green and red CSS class. We can use the ng class directive to control which CSS class gets applied to the h one title based on the name of the boat. So we'll pass the directive in object where the left hand side of each object property is the CSS class we want to apply. Then the value or the right side is an expression that resolves to true or false, which in this case will either be boat name equals starfire or boat name equals oracle. Now we get a different color for each title based on this logic. So far, we've only looked at built in directives in Angular, but you can also build your own custom directives. Electives. Let's go ahead and build our own with the Angular CLI by running an ng generate directive which we'll call magnifier that will increase the size of an image when it's hovered over. Overall, this looks pretty similar to a component, but the key difference is that there is no HTML template or CSS styles. Instead, it's used as an attribute on an HTML element. This particular directive will be used to modify the width of an image element. So we can bind to the host element's width by using the host binding decorator. Lighter. Then any image that uses this directive will start with a width of 200. Then we also want to listen to the mouse enter event to know when the user has hovered over the image with their mouse. With that, we can use the host listener decorator, pass in the DOM event that we wanna listen to, and then define a function to handle this event. In this case, what we wanna do is really simple. Just increase the width from 200 to 300. Now we'll switch back to the HTML in our component and we currently have an image in there that displays the boat image with a width of 200. Let's go ahead and take this out and replace it with the app magnifier directive. If we go back to our app and hover over the images, you'll see that they're resized as soon as we hover over them. Not the most useful thing in the world, but you get the idea of how you can use components and directives together to write really dry reusable code. There's another mechanism in Angular that helps us write reusable code called pipes. A pipe is always used in an interpolated value in the HTML. So so let's imagine we have a big number here, we can use the built in number pipe to round this down to 3 decimals. Angular has some useful built in pipes, but the real power comes when you building your own custom pipes. And chances are somebody's already written the code that you need for your use case, so make sure to check out the AngularPipes GitHub repo for a full list of examples. Like there's one really special pipe that I wanna talk about now, which is the async pipe. In web application, you're commonly fetching data as a promise or an observable, and the async pipe allows you to do this automatically in a predictable way directly in the HTML. In this example, I'm converting our boats array into an observable by using the RX JS of method. So now it becomes an observable object, so our regular ng for loop isn't going to work. What we can do is simply add the async pipe to our for loop, and now it's going to convert that observable to an array by subscribing to it, and in addition, it also unsubscribes when this component is destroyed. That's a whole another subject on RxJS, but just know that it's a very useful mechanism for simplifying your Angular code. In a real app, we'd probably be fetching these boats asynchronously from a database, and the async pipe allows us to treat them more like a synchronous plain JavaScript array. At its core, a pipe is very simple. It's just a function that takes in a value and then spits out another value. Each of our boats has a year property on it. Let's say we want to only display the last 2 digits in that 4 digit year. All all we have to do is go into our custom pipe and then implement this transform method. The value represents whatever value is inside the handlebar syntax in your HTML, then the value you return is what you want to be shown in the HTML. In this case, we'll convert the number to a string and then grab the last two elements on that string. Then we can go add it to the boat year in our HTML. And then if we reopen the app, we'll see that we only get the last two numbers on the year. So so now that you know a lot about components, pipes, and directives, I want to talk about a concept that's really important for Angular developers and that's never touch the DOM. If you're an experienced JavaScript developer, you're probably used to doing something like this where you call document query selector, then grab some element in the DOM and change its inner HTML. And when you're building a progressive web app, this code will work perfectly fine because the DOM exists in a web app. But if you write code like this and you ever wanna do server side rendering or build a native mobile app. This code will not work because the DOM does not exist on other platforms. So now you know why the use of libraries like jQuery are generally discouraged in Angular. Now let's switch gears into the component life cycle. A component is just a class, so the very first thing to happen in its life cycle is the constructor is fired. But components have relationships with other components and they have bindings that are initialized in the HTML, so things get a little bit more complex. In Angular, you typically don't do anything in the constructor except add your dependencies. And that's because your property bindings aren't guaranteed to be available until you run ng on init, which is the first time change detection runs in this component. So the on a net life cycle hook is where you do all of your setup. Maybe you're fetching data from an API or you're setting up a reactive form or something along those lines. I'll go ahead and add our boats observable to n g on a net just to simulate it coming from a database or API. The the very last thing to happen to a component is that it's destroyed, which triggers the on destroy life cycle hook. This is where you would do any tear down for your component an Angular that is commonly unsubscribing from an observable to prevent things like memory leaks and performance issues. On init is by far the most common hook that you'll use, but if you have child views inside of your component, you might also wanna use after view init which will ensure that your child views are it as well. Now that segues into a really important concept in Angular which is change detection. Behind the scenes, Angular is using something called Zone JS that will listen for any events or asynchronous activity in your app and then re render components as needed. You can determine when change detection is happening by using this do check life cycle hook. You wouldn't normally use this to do anything significant, but it is useful for debugging at times. If you're building an interactive app, this life cycle hook will be triggered constantly. You can see we get the 1st console log when the component is initialized. That's when the NG on a net life cycle hook runs. And then as we hover around, different events take place and that triggers change detection and the console log in the browser. So now I want to segue into a concept that is also common in other JavaScript frameworks like React and Vue, and that's marked components versus dumb components, or also commonly called stateful versus stateless or container versus presentational. And basically all this boils down to is a separation of concerns to make your code predictable. A smart component is generally a page or container that controls how things work throughout the app, while the dumb component is only concerned with presentation logic. I've generated a new component called boat that will be our dumb component. It's going to take the data from this n g four loop and extract it into its own isolated presentational component. This allows the parent component to focus on more low level things like synchronizing the state of the app and fetching the items from the database. As your app grows in complexity, this just becomes an easier way to rationalize what's happening in your code. So the home component is a container that fetches the data while the boat component is only concerned with presenting the data in the UI. Like there's a ton of other things we can talk about with Angular Components, but many of those you'll see in practice as we build out different features on this channel. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And if you wanna build more advanced real world features, consider becoming a pro member at angularfirebase.com. You'll get exclusive pro videos every week plus a copy of the Angular Firebase Survival Guide. Thanks for watching, and I'll talk to you soon.
The speakers discuss the basics of Angular Components and how to use them in applications. They explain how to write components, connect objects, and use the function before click to disable a button. They also discuss the use of TypeScript, websites, and apps, including dynamic hook and live cycle hook, and the importance of creating a smart component for app development. The speakers provide examples and explain the process of attaching objects and adjusting image width.