Application Setup

TABLE OF CONTENT

Install the Angular CLI

Install the Angular CLI, if you have not already installed.

npm install -g @angular/cli

Create a new Application

Create a new project named electronic-shop with the below CLI command.

ng new electronic-shop

The Angular CLI generated a new electronic-shop project with a default application and supporting files.

Install Bootstrap

We will use the Bootstrap UI for the creating the User Interface.

Refer Bootstrap Installation for angular, to install bootstrap in this application,

Serve the Electronic Shop Application

Now serve the application using  ng serve command and remove the default content from app.component.html

application setup is complete.

Now we have a blank canvas to start with our application.

let’s add one title message and tagline of our application.

Add Jumbotron in AppComponent

Jumbotron is the Bootstrap component. 

We can use it to show the welcome message, company profile as well as offers, based on your requirement.

I have created one jumbotron on the app.component.html so that it can be visible on all pages. In this, I have shown, one header which will show you a welcome message. And one text which will show you the tagline.

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-3">Welcome to Electronic-Shop</h1>
    <p class="lead">THE ONLINE MEGASTORE</p>
    <hr class="my-2">
  </div>
</div>
  • Tip

If you have installed Bootstrap Snippets Extension then, just write b4-jumbotron on an html page, and it will generate the basic jumbotron template for you.

As shown below, above code will display welcome message and the tagline on the screen.

Jumbotron

Summary

  • We have created initial application structure using Angular CLI.
  • after that, we have installed Bootstrap UI.
  • at the end, we have added a welcome message and tagline of our application using jumbotron on the app.component.html.
Introduction
Component