DOTNET: Sample Example of bootstrap css in angular

Bootstrap css is an open source css framework to develop responsive webpages.

Webpage adjusted according to device width is called "responsive page"
       (or)
*webpage rendering content according to device width is called " responsive page"

  desktop                           webpage[responsive]
  div1 div2 div3 <------------------- div1 div2 div3

   tablet        <-------------------Assume that if the request is coming 
   div1 div2                               from tablet, then it can load into two divs(1 row)
   div3


  mobile        <-------------------Assume that if the request is coming

   div1                                       from mobile, then it can load into one div
   div2
   div3

Bootstrap is provided by twitter
 
bootstrap is providing so many built in css classes
  1.container css class      --this will align html element to center
  2.panel       css class      --this will align html element as panel container
                                         panel-heading--heading for panel
                                         panel-content--body for panel
                                         panel-primary--heading with backcolor sky blue

  3.btn css class      --this will provide button shape to a button | hyperlink


Bootstrap can be installed in angular projects in two ways

1.installing as a node package, this will provide css and js files, this files
    can be linked with index.html

  
2.using CDN link
    [CDN->Content Delivery Network]
          this allows user to download bootstrap css from CDN domain[remote domain],
          bootstrap css files will not be placed|deployed into production server

      browser------------------------>webserver
            <------------------------    index.html[bootstrap cdn links]

            ------------------------->   CDN domain
            <------------------------
               downloading bootstrap
                 files



Create a component







AppModule.ts












Index.html












Add four dummy images into assets folder

.ts Changes

import { Component } from '@angular/core';

@Component({
  selector: 'app-jsondemo',
  templateUrl: './jsondemo.component.html',
  styleUrls: ['./jsondemo.component.css']
})
export class JsondemoComponent {
  custinfo={"name":"Uday","prods":["htc","dell"],"addr":
  {"plotno":143,"street":"abc","city":"hyd"}};
  prods=[
    {"name":"Aiwa","price":5000,"pic":"aiwa.jpg"},
    {"name":"Iphone","price":40000,"pic":"Iphone.jpg"},
    {"name":"Samsung","price":9000,"pic":"Samsung.jpg"},
    {"name":"Sony","price":50000,"pic":"Sony.jpg"}
  ];
}

.html changes

<div class="container" style="font-size:x-large">
    <div class="panel panel-primary">
      <div class="panel-heading">
          Customer Information
      </div>
      <div class="panel-content">
          name:{{custinfo.name}} <br>
         prods: <br>
         <ul>
             <li *ngFor="let p of custinfo.prods">
                 {{p}}
             </li>
         </ul>
         <br>
         addr:{{custinfo.addr.plotno}},{{custinfo.addr.street}},{{custinfo.addr.city}}
      </div>
     </div>
    </div>
    <hr>
    <table class="table table-bordered" style="font-size: x-large;">
     <tr>
         <th>sno</th>
         <th>name</th>
         <th>price</th>
         <th>pic</th>
     </tr>
     <tr *ngFor="let p of prods;let i=index">
      <td>{{i+1}}</td>
      <td>{{p.name}}</td>
      <td>{{p.price}}</td>
      <td>
          <img src="../assets/{{p.pic}}" height="120" width="120">
      </td>
     </tr>
    </table>


Goto index.html to link bootstrap css cdn links
    ...
 <head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>


Index.html














Output











In the above case, if I want to display the output those price is greater than 5000, in that case I cannot use two directive in a single tr, so in that case I need to use
ng-container


<tr>
         <th>sno</th>
         <th>name</th>
         <th>price</th>
         <th>pic</th>
     </tr>
     <ng-container  *ngFor="let p of prods;let i=index">
     <tr *ngIf="p.price>5000">
      <td>{{i+1}}</td>
      <td>{{p.name}}</td>
      <td>{{p.price}}</td>
      <td>
          <img src="../assets/{{p.pic}}" height="120" width="120">
      </td>
     </tr>

ng-container is a non rendering container tag provided by angular, this acts like a dummy
tag, which will not be loaded into browser dom.


2 Method

To install bootstrap, use the below command

npm install bootstrap@3 jquery –save

Once, you install you should be able to see bootstrap and jquery in node_modules folder.




































You, can also verify in the package.json file


























Registering bootstrap and Jquery in Angular

DOTNET

Monday, October 23, 2023

Sample Example of bootstrap css in angular

No comments:

Post a Comment

Kubernetes

Report Abuse