Angular 4 Tutorial

Part-6 How to add css , bootstrap styles to your Angular 4

learn about making your angular 4 app beautiful with css , bootstrap styles

getting started with angular

       
What we've learned so far
This tutorial on adding styles to an Angular 4 app is in continuation of our Angular 4 Tutorial Series and if you have not read the previous parts of the tutorial , it is recommended that you go through them first.
  1. Part-1 :: Introduction
  2. Part-2 :: Angular 4 Project Structure
  3. Part-3 :: Angular 4 Components
  4. Part-4 :: Angular 4 Create Components
  5. Part-5 :: Angular 4 two way data binding
Add styles to Angular 4
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 4 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.
How to add bootstrap to Angular 4 app
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.
  1. In your terminal , execute the following commands in order to install ngx-bootstrap and bootstrap.
  2. 
    
     npm install ngx-bootstrap --save 
     npm install bootstrap --save   
    
    
    
  3. The above command adds the dependencies to our angular 4 project , now let's tell our project to use bootstrap styles
  4. Just open your 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"
            ],
    
            . . . 
    
    
OK great! we've successfully added Bootstrap to our angular 4 project. Now just serve your app with ng serve and see how the look and feel of our InventionsHub app has been enhanced by Bootstrap.

ng serve 



Adding custom styles in Angular 4
In the above section , we added bootstrap to our angular 4 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 comopnents ::
  1. inventions.component
  2. app.component
Let's edit our 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;
}


Now open up inventions.component.html and maeke 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>


Note that apart from using our custom classes , we're also making use of classes from bootsrap. After we're done with the above steps , our app should look like the following upon serving.
styling angular 4 apps with css
Summary
In this part of the tutorial , we learned the following
  1. How to add bootstrap framework to an angular project
  2. How to add custom styling to our components
Hope you enjoying learning about the angular 4 , in the next part we'll come back with more exciting Angular 4 stuff.

       


More from RISHABH.IO















developed & nourished with by rishabh.io