Learn Angular

How to create your first website in Angular 10 -Part 2?

Angular 9, Angular 10

Hello to all, welcome to therichpost.com. In this post, I will tell you, How to create your first website in Angular 10 -Part 2?

Here is the part 1 of this post: How to create your first website in Angular 10 -Part 1?

Angular 10 came. If you are new in angular 10 then please check below links:

Learn Angular

Angular Basic Tutorial

In Part 1 , you have seen Angular install and run on your machine. In this Part 2, I will tell you, how to add bootstrap and create your first html page.

Create your first bootstrap page in Angular 10

Here is complete code and please follow carefully:

1. After understanding the part 1, you need to run below commands to set bootstrap environment into your angular 10 application:

npm install --save bootstrap

2. Now you need to add below code into your angular.json file:

...
"styles": [
              ...
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
"scripts": [
              ...
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
           ]
...

3. Now you need to add below code into src/app/app.component.html file:

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page In Angular 10</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>
  
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

In the end, don’t forgot to run ng serve command. If you have any query then do comment below. In Part 3, I will tell you, how to create new pages(components) and make it working with angular routing.

Jassa

Thank you.

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.