Angular 10 – Styling

In this part, we would cover styling. Actually, what we’ll cover could be applied in any other web application. Although Angular-material is suited for Angular, we’ll use it in addition to Bootstrap, NgBootstrap and Font-Awesome.

The objective it to help you get a taste of various UI design tools out there so you can use anyone you are comfortable with.

The UI we are going to create is as shown below:

Create a new Angular app and then follow the rest of the steps.

1. Add Necessary Libraries
2. Setup Page Layout
3. Create Angular Material Buttons
4. Add Bootstrap Cards
5. Adjust Image Sizes
6. Add a Jumbotron
7. Final Notes

1. Add Necessary Libraries

The four libraries you’ll add are:

• Font-Awesome
• Angular Material
• Bootstrap
• NgBootstrap

To add them, run the commands below, one after the other

npm install angular-material --save

npm install font-awesome --save

npm install bootstrap --save

ng add @ng-bootstrap/ng-bootstrap

Next, you need to import the styles into your Styles.css file. Just add these imports

<!– HTML generated using hilite.me —

@import "~bootstrap/dist/css/bootstrap.css";
@import "~font-awesome/css/font-awesome.css";

Next, create the home component using the ng generate component command.

Go to the Bootstrap website, to the Templates section and find copy the code for the Starter template. This template contains the top navigation bar.

Place the code in the app.component.html file

2. Setup the Page Layout

Bootstrap uses the grid system for page layout. Learn more here. So the page is divided into rows and columns.

The code below will create a layout with a single row and four columns. You can then duplicate the rows as needed.

  <div class="row">
    <div class="col-sm">
      Column One
    </div>
    <div class="col-sm">
      Column Two
    </div>
    <div class="col-sm">
      Column Three
    </div>
    <div class="col-sm">
      Colunm Four
    </div>
  </div>

3. Create Angular Material Buttons

Now we’ll create some stylish buttons using Angular material, one button for each column. The markup for one button is given below.

  <a href="/friends"
     role="button"
     class="btn btn-outline-primary btn-lg btn-block text-center">
    <span><i class="fa fa-users"></i></span>
    <br>Angular
  </a>

Also notice that Font-Awesome has been used to add the icon.

Use the code below in you Style.css to create a margin between the buttons and the banner.

.container{
  margin-top:5%;
}

Then you also add this style to kind of increase the size of the Font-Aweson icons

.fa{
  font-size: 50px;
}

4. Add Bootstrap Cards

We’ll add four cards as shown in the Figure 1. Each card for each column. Just replace the Column One, Two… with code below.

<div class="card" style="width: 18rem;">
  <img src="/assets/images/horse.jpg" class="card-img-top">
  <div class="card-body">
    <h5 class="card-title">Cute Horse</h5>
    <p class="card-text">Some quick example text's content.</p>
    <a href="#" class="btn btn-primary">View Horse</a>
  </div>
</div>

As you can see, we have an image, horse.jpg. Now, images should be placed inside an assets folder. So create the images folder inside the assets folder and place your images there.

5. Adjust the Image Size

Now we’ll like all the image to be of the same width and height. To achieve this, it’s easier to the height and width attribute of the <img> tag. For me I used 200 x 160 like so:

 width="200px" height="160px" 

6. Add a Jumbotron

A Jumbotron is a UI element normally used in home pages. It covers a large area, contains text and other things.

So head to the Bootstrap website and copy the markup for a Jumbotron. See below:

<div class="jumbotron">
  <div class="container">
    <h1 class="display-3">Simple Amazing UI!</h1>
    <p>This is a template for a simple. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
  </div>
</div>

Place this code in the HomeComponent before any element.

.jumbotron{
  padding-top: 10px;
  padding-bottom: 5px;
  margin-bottom: 0px;
}

You can now save everything and relaunch the application to see how it looks.

7. Final Notes

As you know, this tutorial is not a UI tutorial. So there a gazillion of things you can do with UI libraries. This is just a tip of the iceberge. I’ll recommend play around with UI libraries and create nice home pages.

Subsequent tutorials would use this setup we created in this lesson.