This tutorial on adding styles to an Angular 8 is in continuation of our Angular 8 Tutorial Series and if you have not read the previous parts of the tutorial, it is recommended that you go through them first.
Modern webapps have their soul in design. And no modern apps can exist without a solid combination of UI and UX , here in this part of our Angular 8 tutorial series , we'll learn about how we can enhance the UI aspect of our app using styles. Angular supports adding css , sass , bootstrap etc.
Bootstrap is a CSS framework which helps with the styling of webapps. It has got a pre-defined set of css selectors which are ready to be utilized in webapps. Following is how we add bootstrap to our angular app.
npm install ngx-bootstrap --save
npm install bootstrap --save
angular-cli.json
file [in the root directory of the project] and add the following line in the styles section
. . .
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
. . .
ng serve
and see how the look and feel of our InventionsHub
app has been enhanced by Bootstrap.
ng serve
In the above section , we added bootstrap to our Angular 8 project InventionsHub
and in this section , we'll learn how to add custom styles to individual components. You might have observed that with each component there's always a file called component-nane.component.css
. This is the style file for the component and this is where we define custom styles for our components. In our InventionsHub
app , we have following 2 components:
inventions.component.css
to give it an awesome look and feel. Just open up inventions.component.css
in your editor and add the following css code to it.
.invention {
padding: 20px;
background: #343434;
color: #e4e4e4;
border-radius: 10px;
margin-bottom: 5px;
}
.invention-creator {
background: #ededed;
padding: 10px;
margin: 5px;
}
inventions.component.html
and make it look like the following:
<li *ngFor="let i of inventions">
<div class="invention">
<span> <b> Name: </b> {{ i.name }} || </span>
<span> <b> Inventor: </b> {{ i.inventor }} || </span>
<span> <b> Year: </b> {{ i.year }} </span>
</div>
</li>
<!-- add new inventions -->
<hr>
<!-- Let the user enter information and display the same side by side -->
<!-- <label> {{ nameModel }} </label> -->
<div class="invention-creator">
<div>
<input [(ngModel)]="nameModel" placeholder="enter name" class="form-control">
</div>
<hr>
<!-- <label> {{ inventorModel }} </label> -->
<div>
<input type="text" [(ngModel)]="inventorModel" placeholder="enter inventor " class="form-control">
</div>
<hr>
<!-- <label> {{ yearModel }} </label> -->
<div>
<input [(ngModel)]="yearModel" placeholder="year" class="form-control">
</div>
<br>
<!-- call the createInvention() function from component on click of button -->
<!-- note the use of parenthesis for the click event -->
<button class="btn btn-primary" (click)="createInvention()"> create invention </button>
</div>
In this part of the tutorial , we learned the following