Simple Angular Login Page on app.component.html

<h3>Login Page</h3>

<courses></courses>

<div id="login">

    <h3 class="text-center text-white pt-5">Login form</h3>

   

    <div>

    <div class="container">

        <div id="login-row" class="row justify-content-center align-items-center">

            <div id="login-column" class="col-md-6">

                <div id="login-box" class="col-md-12">

                    <form id="login-form" class="form" action="" method="post">

                        <h3 class="text-center text-info">Login</h3>

                        <div class="form-group">

                            <label for="username" class="text-info">Username:</label><br>

                            <input type="text" name="username" id="username" class="form-control">

                        </div>

                        <div class="form-group">

                            <label for="password" class="text-info">Password:</label><br>

                            <input type="text" name="password" id="password" class="form-control">

                        </div>

                        <div class="form-group">

                            <label for="remember-me" class="text-info"><span>Remember me</span> <span>

                            <input id="remember-me" name="remember-me" type="checkbox"></span></label><br>

                            <input type="submit" name="submit" class="btn btn-info btn-md" value="submit">

                        </div>

                        <div id="register-link" class="text-right">

                            <a href="#" class="text-info">Register here</a>

                        </div>

                    </form>

                </div>

            </div>

        </div>

    </div>

    </div>

</div>

How to add bootstrap to your angular project (Angular 8)

Angular with Bootstrap

Bootstrap is the world’s most popular framework for building responsive, and mobile-first sites while Angular is one of the most powerful JavaScript framework. There are three(3) major ways to add bootstrap to our angular project.

Method 1: Using Angular CLI (npm install).

Method 2: Using CDN (Copy and Paste method).

Method 3: Adding bootstrap CSS files to your project (Using CSS import ).

I will be focusing on method 1 and 2 in this publication.

Get Started: You are expected to have installed nodejs on your machine if not, it can be foundhttps://nodejs.org: download and install. Let’s start with installing angular using Command Line Interface (CLI) from NPM package.

npm install -g @angular/cli

let’s create a new angular project using command line interface (CLI).

ng new AngularBootstrap

You can add additional features when you are generating your angular project from CLI just as type of styling, by default styling is css. If you want to powerfull styling like SCSS in your project ( $ ng new AngularBootstrap — style=scss)

cd AngularBootstrap

If you are using VS code on your window machine just enter $ code . to open the project.

Method 1: Using Angular CLI (npm install). From the command line interface install bootstrap and references it in angular.json

npm install bootstrap --save

If you want to use bootstrap Javascript function, you need to install JQuery and popperjs with it. BootstrapJS depends on JQuery

npm install jquery --save

If you need the functionality of a popover in angular application, you can add popper.js. You can learn more on this https://popper.js.org/index.html#example10

npm install popper.js --save

Reference the path in angular.json file. Make sure you reference it under build node. check out the code below.This is an old way of referencing bootstrap in our project most especially in Angular 1, the url to the path is added to the index.html for global referenced. For more information go to https://www.getbootstrap.com/Method 3: Adding bootstrap CSS files to your project:

You can direct add bootstrap folders to your asset directory in your angular project and reference the folder directly into your style.css or style.scss using

@import url("bootstrap.min.css"); 

---

Extra:- Font-awesome is the one of the most popular place to get icon to use for web design. You can add font-awesome icon to your angular project using npm, and reference the css in your angular.json file.

npm install font-awesome 

Angular - Setting up the local environment and workspace

Node.js

Angular requires a current, active LTS, or maintenance LTS version of Node.js. See the engines key for the specific version requirements in our package.json.

• To check your version, run node -v in a terminal/console window.
• To get Node.js, go to nodejs.org.

Step 1: Install the Angular CLI

You use the Angular CLI to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

Install the Angular CLI globally.

To install the CLI using npm, open a terminal/console window and enter the following command:

npm install -g @angular/cli

Step 2: Create a workspace and initial application

You develop apps in the context of an Angular workspace.

To create a new workspace and initial starter app:

1. Run the CLI command ng new and provide the name my-app, as shown here:

   ng new my-app

2. The ng new command prompts you for information about features to include in the initial app. Accept the defaults by pressing the Enter or Return key.

The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes.

The CLI creates a new workspace and a simple Welcome app, ready to run.

Step 3: Run the application

The Angular CLI includes a server, so that you can easily build and serve your app locally.

1. Go to the workspace folder (my-app).
2. Launch the server by using the CLI command ng serve, with the --open option.

cd my-app
ng serve --open

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.

The --open (or just -o) option automatically opens your browser to http://localhost:4200/.

You will see: