DOTNET

Monday, October 23, 2023

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

Basic Introduction To JSON For Angular Application

Json is a data exchange[storage] format in the form of key|value pairs

This is used to transfer data between client and server in ajax implementation
*syntax:
  1.single json object
       {"key1":"value1","key2":"value2",..}

  2.json collection[array of json objects]
       [
         {"key1":"value1","key2":"value2",..},
               ...
       ];

*Json advantages over xml:
 1.developer friendly[easy to manipulate->read | write]
 2.light weight data storage[less memory compare to xml]-->communication faster->better performance
    eg:
     <product>                           --->xml data storage---> around 90 bytes
      <prodid>p001</prodid>
      <prodname>dell</prodname>
      <prodprice>50000</prodprice>
     </product>


     {"prodid":"p001","prodname":"dell", --->json data storage---> around 50 bytes  
                      "prodprice":50000} 


3.browser will perform faster interpretation

   xml----->browser---->xml parser-->loading data  -------->script[programming]
                                     into memory in
                                     hierarchical format

   json---->browser---->script

Nested Component Example 3

Sharing data between nested components is possible using following things:

 1.Input decorator
     ->this is used to declare an input property to achieve property binding
       syntax:
          @Input()
           <propname>:<type>;
     ->this can be used with in innercomponent [childcomponent] to receive data from outer component [parentcomponent]

 2.Output decorator
      ->this is used to declare an output property to achieve event binding
      ->this can be used with in inner component to send data to outter component 
      ->this should be applied to Event Emitter class

Event Emitter class
      This is used to declare a custom event
      ->syntax:
          @Output()
           <eventname>=new EventEmitter<type>();
                                         |
                                     payload type
      ->event name can receive an address of a method, it acts like a
        function pointer.
      ->emit method is used to call a method maintained by eventemitter
         this.<eventname>.emit(data);

Count Component.ts

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-students-count',
  templateUrl: './students-count.component.html',
  styleUrls: ['./students-count.component.css']
})
export class StudentsCountComponent {
  @Input()
  all: number | undefined;
  @Input()
  male: number | undefined;
  @Input()
  female: number | undefined;

  selectedRadioButtonValue: string = 'All';
  // The Output decorator makes the property of an Component as an Output property
  // The EventEmitter class in Angular is used to create the custom event
  // When the radio button selection changes, the selected radio button
  // value which is a string gets passed to the event handler method.
  // Hence, the event payload is string.
  
  @Output()
  countRadioButtonSelectionChanged: EventEmitter<string> =
      new EventEmitter<string>();
  // This method raises the custom event. We will bind this
  // method to the change event of all the 3 radio buttons
  onRadioButtonSelectionChange() {
      this.countRadioButtonSelectionChanged
          .emit(this.selectedRadioButtonValue);
  }
}



Count Component. html


<span>Show : </span>
<input name='options' type='radio' value="All"
       [(ngModel)]="selectedRadioButtonValue"
       (change)="onRadioButtonSelectionChange()">
<span>{{'All(' + all + ')'}}</span>
<input name="options" type="radio" value="Male"
       [(ngModel)]="selectedRadioButtonValue"
       (change)="onRadioButtonSelectionChange()">
<span>{{"Male(" + male + ")"}}</span>
<input name="options" type="radio" value="Female"
       [(ngModel)]="selectedRadioButtonValue"
       (change)="onRadioButtonSelectionChange()">
<span>{{"Female(" + female + ")"}}</span>




Grid Component. ts

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

@Component({
  selector: 'app-students-grid',
  templateUrl: './students-grid.component.html',
  styleUrls: ['./students-grid.component.css']
})
export class StudentsGridComponent {
  students: any[] = [
    {
        ID: '1', FirstName: 'Rajakonda Uday', LastName: 'Kumar',
        DOB: '12/8/1990', Gender: 'Male', CourseFee: 12334.56
    },
    {
        ID: '2', FirstName: 'Kittu', LastName: 'R',
        DOB: '10/14/1989', Gender: 'Male', CourseFee: 6666.00
    },
    {
        ID: '3', FirstName: 'abc', LastName: 'd',
        DOB: '7/24/1992', Gender: 'Female', CourseFee: 6543.15
    },
    {
        ID: '4', FirstName: 'def', LastName: 'd',
        DOB: '8/19/1990', Gender: 'Female', CourseFee: 9000.50
    },
    {
        ID: '5', FirstName: 'ads', LastName: 'df',
        DOB: '4/12/1991', Gender: 'Male', CourseFee: 9876.54
    }
];
selectedStudentCountRadioButton: string = 'All';
getTotalStudentsCount(): number {
  return this.students.length;
}
getMaleStudentsCount(): number {
  return this.students.filter(std => std.Gender === 'Male').length;
}
getFemaleStudentsCount(): number {
  return this.students.filter(std => std.Gender === 'Female').length;
}
onStudentCountRadioButtonChange(selectedRadioButtonValue: string): void {
  this.selectedStudentCountRadioButton = selectedRadioButtonValue;
}
}


Grid Component.html


<app-students-count [all]="getTotalStudentsCount()"
[male]="getMaleStudentsCount()"
[female]="getFemaleStudentsCount()"
(countRadioButtonSelectionChanged)="onStudentCountRadioButtonChange($event)">
</app-students-count>
<br/><br/>
<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Gender</th>
            <th>DOB</th>
            <th>Course Fee</th>
        </tr>
    </thead>
    <tbody>
        <ng-container *ngFor="let student of students;">
            <tr *ngIf="selectedStudentCountRadioButton=='All' ||
                       selectedStudentCountRadioButton==student.Gender">
            <td>{{student.ID | uppercase}}</td>
            <td>{{student.FirstName | uppercase}}</td>
            <td>{{student.Gender}}</td>      
            <td>{{student.DOB | date:'dd/MM/y'}}</td>
            <td>{{student.CourseFee | currency:'USD':true:'1.2-2'}}</td>
        </tr>
    </ng-container>
        <tr *ngIf="!students || students.length==0">
            <td colspan="10">
                No Students to display
            </td>
        </tr>
    </tbody>
</table>



Output

DOTNET

Monday, October 23, 2023

Sample Example of bootstrap css in angular

Basic Introduction To JSON For Angular Application

Nested Component Example 3

Kubernetes

Report Abuse