Creating Components in Angular
In angular, a component dictates what is viewed on the DOM. The DOM will typically consist of many different components that are tied together and styled for display to the user. Unlike with React, where your component logic and html lived in one file, with angular, each of the elements of a component are separate. This means, we have 3 or more files for each component. Today we will only discuss the typescript file, html file, and css file. With this knowledge, you will know how to create basic angular components that can be viewed on the DOM.
Before we dive into creating the component, I just want to go over some naming conventions. To create a new component, we will create a new folder within our app file that will house all of our component files. This folder should be named after your component. Within this folder, the files should be named as such: componentName.component.fileType.
Step 1: The Component Typescript File
The typescript file will be where your component information is housed. This will be the file with a naming convention of componentName.component.ts. At the top of the file, we will need to import Component from angular/core.
This will allow us to use the component decorator provided to us by typescript. It allows for the class below it to be viewed as a component. The component houses metadata that gives some direction of how to use the component. All components must have a template. The template is the html code associated with the component. This can be done, either in line or by pointing to the html file, which we will do for this tutorial. Other than that there are numerous other metadata that can be used in the component to make any necessary associations. We will be adding the selector. This will allow us to associate the component as a specific html tag. While there are multiple ways to implement the selector, we will be using the selector as an html tag. We will also add the styleUrls meta data to associate the appropriate css file with the component. The styleUrls should be set to an array of routes to the css styling sheets; the routes should be strings. This is an array because it can point to many different style sheets if necessary.
Directly after the component, we should have our exported class, which will be converted to a component and will eventually hold any necessary logic required for the component.
And that is all we will be housing in our typescript file for the purposes of this tutorial.
Step 2: The Component HTML File
The html file, should house any html code you would like displayed to the DOM. For our tutorial we will make an h1 tag that will say “We are Angular component experts!”.
The html file is as simple as that. Whatever we place in this file will be rendered to the DOM, so long as we call out selector within the main component, in our case the app component.
Step 3: The Component CSS File
This file will house any of the css styling you would like applied to the component. This, of course, works just as any other styling sheet. You must either call on a specific html, class, id, etc to further style the specified element. We will simply change the color of our h1 tag to blue.
Final Steps
Finally, we will tie everything together so that this component may be rendered. In angular, unless you import the component to the app.module.ts file and add it as a declaration to the ngModule, angular and typescript will not know that the files exists. Therefore, we will import our test component into the app.module.ts file and add it as a declaration. (Side note: we do not have to specify file type when providing the file route to import from)
At this time we can now call our app-test tag in the app.component.html file to render our html code from the test component.
And there you have it! You just rendered your first angular component to the DOM. Of course, this is just a simple start point. Components can get more complex, as we begin to add more meta data to our components and add different features to our application. I encourage you to play around with this base tutorial and explore more features that can be added to components with angular.
