In this article we will discuss how to style Angular Components in different ways. If you miss our previous article of angular then please go through the link Angular Nested Components.
Angular components can be style in different ways like below;
- Using Bootstrap
- Styling using the @component decorator styleUrls property
- Styling Angular Components using External Style-sheets
- Styling Angular Components using Inline Styles
- Styling in the component HTML file
- Styling in the Component file
 |
| Employee Information |
We Follow same article like before Angular Nested Components. The same employee.component.ts we considered like below;
The following is the employee.component.html that we created in our previous article.
Now, let’s discuss the different options that are available in angular to style the table and row. Here, we are also going to discuss the advantages and disadvantages of each option.
➤ Using Bootstrap
To add the bootstrap in angular you need to follow the below command like below and then add the bootstrap css in angualr.json file to access the css globally.
npm install --save bootstrap
After install and adding the bootstrap then use the bootstrap class into table like below; after adding this you can find the output like this
Let's add a css in employee.component.css like below and remove the table class css of bootstrap that we use before;
 |
| You can see in the StyleUrls we call the employee.componenet.css |
Pros
- The Component can be easily reused as both the stylesheet itself and its path are included within the component.
- Application maintenance becomes very easy. If you need to change the styles then you need to do this only in one place.
- You also get the VS Code editor features such as formatting, intellisense, and Code completion.
- The styles specified using this approach are local to the component and hence, they will not collide with styles used elsewhere in the application.
Let's use the same CSS that we use for StyleUrls, open the style.css and add the css like below;
And also block the StyleUrls in employee.component.ts file. When we run the application you can see the output as like below;
Pros
- In this case, you will get the VS Code editor features such as intellisense, formatting and Code completion.
- The biggest advantages of using an external style sheet are if you want to change or modify the styles then you need to do this only in one place. As a result, the maintenance of the application becomes very easy.
Cons
- As you specify the reference to the external styles sheets in the index.html page, these styles may affect the table and td elements in other components where you may not want these styles to be applied.
➤ Styling Angular Components using Inline Styles
Also we use style as inline within the component’s HTML file (employee.componet.html).
When you run he application the same output printed as like we did in styling external css and styling Urls as we taken same CSS.
Pros
- Here also you will get the Visual Studio Code editor features such as formatting, Intellisense, and Code completion.
- The Inline-styles are local to the component in which they are applied and hence they don’t override with the styles used in any other places in the application.
- With inline styles, the maintenance of the application becomes very difficult. This is because if you want to change or modify the styles then you need to do the same things in multiple places.
➤ Styling in the component HTML file
You can directly use the CSS file in the Html without using any external CSS or other source.
When you run the application you can see the output like below;
Advantages
- The component can be reused easily as the styles are defined inline here within the component itself.
- Application maintenance becomes very easy. The reason is, if you need to do any changes in the styles, then you only have to do the changes in one place
- Here, you will also get Visual Studio Code editor features such as Code completion, Intellisense, and formatting.
- The styles specified using this approach are local to the component and hence they will not collide with styles used elsewhere in the application.
➤ Styling in the Component file
In this case you need to specify the styles in the component file using the @component decorator’s style property. Here we are specifying the required styles using the styles property of @Component decorator.
Pros
- Application maintenance becomes very easy. The reason is, in case you need to change or modify the styles then you need to do this only in one place.
- The styles specified using this approach are local to the component (i.e. to the HTML File) and hence, don’t override with the styles used elsewhere in the application.
- The Visual Studio Code editor features such as Code completion, Intellisense, and formatting are not available.
Summary
In this tutorial we discussed Styling Angular Components. If have any question related to this topic then give your feedback.
Post a Comment