Angular, just like React, is a component-based framework. In this video, you can learn how to convert your React components into Angular components, and how to use them in your application.
- [Narrator] In this video, we're gonna talk about components in Angular, and how they compare to components with React. We're gonna start with our exampleComponent.js file that we referenced in a previous video. It's contained in the exercise files, so if you haven't already, go ahead and drop that into your project. And go ahead and run an npm install. As you can see, this is a basic component; it's rendering just a div with some p and span tags, and with some basic props. We're gonna go ahead now and generate a new component within our Angular app. So to do that, we use the command ng generate component, and we're gonna name it "example." So as you can see, it went ahead and made a few files here.
We can go into our folder structure now, and you can see this example folder within our source/app directory. And so if you look inside this example file, you'll see a few different files. We have our component's CSS, our component HTML file, our component's spec for containing tests, end-to-end tests, and our component.ts file. Let's go ahead and open up our compenent.ts file in Visual Studio Code. So, as you can see, in a similar way to our React file here, we have a class of exampleComponent.
Similarly, we're also using a class here, class ExampleComponent, in our Angular file. One major difference is this @Component decorator here. This decorator is what Angular uses to attach specific attributes to our component, specific for Angular. In this case, we have our selector here, which is what you'll use if you're instantiating this component in another Angular file. You have our templateUrl here, which is a reference to the component HTML file I referenced previously.
And then we also have our styleUrl file, which is a reference to the CSS file that I also referenced earlier. You can see here, this phrase, "implements OnInit." ngOnInit here is a lifecycle method that runs when the component is first instantiated on the page. We'll talk more about that later. Now that we've taken a look at our exampleComponent.ts, let's take a look at the HTML file. So, as you can see, this is just a basic HTML template, and it's very similar to the contents of your return for your render function here in your React component.
One thing that's noteworthy is that, instead of using single brackets to bind values, if we were to bind values in our Angular HTML file, we would use double brackets instead. So, you could just reference an example name, like that. And this component.html is referenced here in this templateUrl. So it's loaded automatically as the template for this particular component, instead of in React, where you usually keep all of the things in one single file. So now that we've taken a quick look at the HTML, in a React file, you would add logic here, above your render function, for any logic that you would need to put in your component.
In a similar fashion, in our example.component, you would put all of the controller logic here within the class itself, whereas you keep your component over here, your HTML template separate. We'll talk more about the controller logic later. And that's how you build a component in Angular.
- Comparing ES6 to TypeScript
- Converting and app from React to Angular
- Evaluating the code structure of a React app
- Compilating ahead of time
- Using type guards and advanced types
- Converting components
- Working with controller logic
- Passing data between components
- Creating pipes and directives
- Using services instead of flux
- Using declared routes