Using Styles and StyleUrls Component Properties in Angular
Jul 14, 2020 • 6 Minute Read
Introduction
Every app framework offers different ways of styling HTML components. In Angular, there are two ways to keep CSS code to style your component's HTML template.
- Keep the CSS inline
- Keep the CSS separately in its own file
For each of these methods, a different property in component's metadata has to be used. styles property should be used when the number of style properties is less than ten or so. If you have to define a lot of CSS styles, then it is always better to put them in separate files and use the styleUrls property to point to them.
In this guide, you will learn to use those two properties to style your component's HTML template. You will try to render a few properties for a technical event and style the HTML elements.
Prerequisites
To complete this guide, you should have:
- Node - 12.17.0
- Angular CLI - 9.0.2
- Visual Studio Code - 1.45.1
Getting Started
Create an Angular Project
- Execute the following command to create an Angular project.
ng new styles-demo
- When prompted to add routing to the application, press N.
- When prompted to choose stylesheet format, press ENTER.
Opening the Generated Application in Visual Studio Code
- Click on the File menu in the top menu bar and select the menu option Open Folder.
- In the file dialog box, navigate to the folder where you generated the application.
- In this folder, you should see a folder named styles-demo. Select this folder and click Open in the file dialog box.
Setting up the Project
Install Twitter Bootstrap and jQuery and refer them in your project so that you can use some of the form styles to make the form look good.
- Go to the command prompt and run following command:
cd styles-demo
- Run the following command to install jquery:
npm i jquery
- Run the following command to install Bootstrap:
npm i bootstrap
- In Visual Studio Code, open the file angular.json.
- Add the following line in the styles array before src/style.css.
"node_modules/bootstrap/dist/css/bootstrap.min.css",
- Add the following lines in the scripts array:
"node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js"
- In Visual Studio Code, open the file src > index.html.
- At line number 10, in the body element, add the following class:
class="container"
The final code should look like this:
<body class="container">
<app-root></app-root>
</body>
Now the project is all set to develop the events page.
Developing the Events Page
- Run the following command in the command prompt:
ng generate component event-thumbnail
- In Visual Studio Code, open file src > app > event-thumbnail > event-thumbnail.component.ts, delete the contents of the file, and add the following code. Notice that the styles metadata property has been used to specify CSS styles.
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector:'app-event-thumbnail',
templateUrl:'./event-thumbnail.component.html',
styles:[`
.green { color:#003300 !important; }
.bold { font-weight:bold; }
.thumbnail { min-height: 210px; padding-left: 10px; background-color:#343a40; margin-bottom:10px; }
.pad-left { margin-left: 10px; }
.well div { color: #bbb; }
`]
})
export class EventThumbnailComponent
{
event:any = {
name:'Ng-Europe',
date:'09/10/2020',
time:'8:00 am',
price:'200',
onlineUrl:'https://www.pluralsight.com/angular/ng-europe'
};
}
- In Visual Studio Code, open the file src > app > event-thumbnail > event-thumbnail.component.html, delete the contents of the file, and add following code:
<div class="well hoverwell thumbnail">
<h2>{{event.name | uppercase}}</h2>
<div>Date: {{event.date | date}}</div>
<div>Time: {{event.time}}</div>
<div [ngSwitch]="event.time">
<span *ngSwitchCase="'8:00 am'">Early Start</span>
<span *ngSwitchCase="'10:00 am'">Late Start</span>
<span *ngSwitchDefault>Normal Start</span>
</div>
<div>Price: {{event.price | currency}}</div>
<div>
<span>Online URL: {{ event.onlineUrl }}</span>
</div>
</div>
- In Visual Studio Code, open the file src > app > app.component.html, delete the contents of the file, and add following code:
<app-event-thumbnail></app-event-thumbnail>
Launching the Development Server
- Run the following command in the command prompt to start Angular Development Server in watch mode: ng serve
- If prompted to share Angular CLI usage data, press the N key to not share it.
- Open a browser and type the following URL in the address bar to launch the application: https://localhost:4200.
- Notice that the event thumbnail is rendering fine with all the styles applied.
Using the styleUrls Property
- In Visual Studio Code, open the file src > event-thumbnail > event-thumbnail.component.ts, copy all the CSS code from the styles array, and paste it in the file src > event-thumbnail > event-thumbnail.component.css. The final event-thumbnail.component.css file should look like this:
.green { color:#003300 !important; }
.bold { font-weight:bold; }
.thumbnail { min-height: 210px; padding-left: 10px; background-color:#343a40; margin-bottom:10px; }
.pad-left { margin-left: 10px; }
.well div { color: #bbb; }
- In Visual Studio Code, open the file src > event-thumbnail > event-thumbnail.component.ts and replace the styles property in the component decorator with the following code:
styleUrls: ['./event-thumbnail.component.css']
- Notice that in the browser, the event thumbnail component is still rendering fine with all the styles applied.
Conclusion
Congratulations!! You have used both styles and styleUrls metadata properties to style your component's HTML template. For more information, refer to the Styles in Angular documentation.
