Angular is a popular framework for creating front-ends for web and mobile applications. Components are an important part of any Angular application.
In this blog, we look at some of the best practices for Angular’s components.
1. File Name
It’s important that we are able to easily find files within our application. To make this possible, we need to name them carefully and ensure that the file’s name describes its contents explicitly to make it easy to identify.
In the following image, the file name ‘catalog.component.ts’ clearly indicates that this is our catalog component. This naming style, which consists of a descriptor followed by a period and then followed by its type, is a recommended practice according to the Angular style guide.
Similarly, for the CSS file, the same should be named ‘catalog.component.css’. So, using ‘catalog.component.css’ makes it clear that these are the styles for the catalog component. We can do the same thing for the template and call this ‘catalog.component.html’.
2. Prefixing Component Selectors
There are multiple ways to write code, but when we follow some fundamental rules in our code writing practices, and categorize the file structure and folder correctly, it will simplify the process of locating code, identifying code quickly, and help us to reuse the code.
We have a couple of components in our example that have selectors that we use in our HTML. Please view image below for more details.
For example, this nav-bar.component has a nav-bar selector. It is a good practice to add a prefix to these selectors that match the feature area where these selectors can be used. This component is in our core module, which is sort of an app-level module. Hence, we will prefix that with wb, for whitebeards.
Prefixing of the component selectors in this manner avoids conflicts when we import a module that has a component selector that conflicts with one of its component name(s).
This component resides in our shared module, which is also an app-wide module, so we will prefix this one with wb . We do not have any components with selectors in our feature areas, i.e. catalog or user features.
Prefixes are usually two to four characters to keep them short to avoid distracting from the actual component name. As a matter of fact, prefixes can really be whatever you want, however, just be sure to prefix them with something that represents the feature area that they are in. Add these prefixes whenever you use a selector.
3. Using separate CSS and template files
The Angular style guide recommends that if our template or CSS has more than three lines, you should extract them. So we will start by creating a sign-in. component. css file, and then copy the styles out from there. We can put them in a separate css file.
4. Decorating input and output properties
To declare input and output properties on components, you can declare them as inputs in your component metadata. It is recommended that you also use a decorator. Thus, the same syntax exists for output properties, and the same rule applies here. Decorating our input and output properties makes it more obvious which properties are used for input and output, and simplifies the renaming process.
Finally, it is also simple less code to write…
Don’t miss my next blog, ‘Angular Components Best Practices (Part 2)’ where I will share some more best practices for Angular’s components.
Author
