Tuesday, September 3, 2019

News Feed Pending

https://medium.com/free-code-camp/follow-these-simple-rules-and-youll-become-a-git-and-github-master-e1045057468f

https://medium.com/@XiaohanZeng/i-interviewed-at-five-top-companies-in-silicon-valley-in-five-days-and-luckily-got-five-job-offers-25178cf74e0f

If you are able to communicate to google search engine and produce quality results then you are a smart searcher.

https://docs.microsoft.com/en-us/office/open-xml/working-with-comments

Nuget Package Manager for Open Office XML
https://www.nuget.org/packages/DocumentFormat.OpenXml/

openoffice xml c#
https://csharp.hotexamples.com/examples/DocumentFormat.OpenXml.Presentation/Slide/-/php-slide-class-examples.html

http://qaru.site/questions/6694928/openxml-bulleted-list-with-multiple-bullet-charcter

Why we should always choose a leadership position in life?
A labor class people will not get a chance to go and work in foreign countries. but A leader class people will go often. The main business is among the level of our communication and our problem solving skills. As a leader we will always have a better level of communication than a labor. This helps us to take part in different level of Problems. An organization doesn't directly depends on labor. There is a hierarchy of positions inside. A leader is always more conscious about the project where as a labor thinks only his part of work. A leader needs to spend more than office hours.

https://hi.quora.com/%E0%A4%B6%E0%A4%BE%E0%A4%A6%E0%A5%80%E0%A4%B6%E0%A5%81%E0%A4%A6%E0%A4%BE-%E0%A4%B2%E0%A5%8B%E0%A4%97%E0%A5%8B%E0%A4%82-%E0%A4%95%E0%A5%8B-%E0%A4%95%E0%A4%BF%E0%A4%B8-%E0%A4%AC%E0%A4%BE%E0%A4%A4-%E0%A4%95%E0%A4%BE

How to backup blog:
https://support.google.com/blogger/answer/41387?hl=en

API Performance Testing:
https://www.guru99.com/jmeter-tutorials.html

Entire machine learning:
https://www.youtube.com/watch?v=9f-GarcDY58

PostgreSQL 9.2.24 Documentation
https://www.postgresql.org/docs/9.2/libpq-example.html




Monday, September 2, 2019

Bootstrap Learnings

URL: https://getbootstrap.com/
Download the required files for working with bootstrap.

Starting template:
https://getbootstrap.com/docs/4.3/getting-started/introduction/#starter-template

copy all the link from starter template and download the files for working offline.
for the demo purpose. now remove all integrity and cross-origin attribute from link tags.

Tutorial Link:
https://www.youtube.com/watch?v=Udyaj2hf6wM&list=PLvQjNLQMdagNNLxYL_2Tg-CUxjSufZlGC&index=25

Lession starts here:
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <title>Hello, world!</title>
  </head>
  <body>
    <!-- Lesson 1: Container-->
    <div class="container">
    <h1 style="background: red" class="text-primary">Hello, world!</h1>
</div>

<div class="container-fluid">
    <h1 style="background: red" class="text-primary">Hello, world!</h1>
</div>

<!-- Lesson 1: Container END-->

<!-- Lesson 2: Grid System in Bootstrap 4 -->

<div class="row"><!-- A row consist of 12 columns-->

<div class="col-lg-4" style="background: red">Hello World</div><!--merging 4 columns-->
<div class="col-lg-4" style="background: blue">Hello World</div><!--merging 4 columns-->
<div class="col-lg-4" style="background: red">Hello World</div><!--merging 4 columns-->
</div>

<div class="row"><!-- A row consist of 12 columns-->

<div class="col-md-4" style="background: red">Hello World</div><!--merging 4 columns-->
<div class="col-md-4" style="background: blue">Hello World</div><!--merging 4 columns-->
<div class="col-md-4" style="background: red">Hello World</div><!--merging 4 columns-->
</div>

<div class="row"><!-- A row consist of 12 columns-->

<div class="col-sm-4" style="background: red">Hello World</div><!--merging 4 columns-->
<div class="col-sm-4" style="background: blue">Hello World</div><!--merging 4 columns-->
<div class="col-sm-4" style="background: red">Hello World</div><!--merging 4 columns-->
</div>


<div class="row"><!-- A row consist of 12 columns-->

<div class="col-md-6" style="background: red">Hello World</div><!--merging 6 columns-->
<div class="col-md-6" style="background: green">Hello World</div><!--merging 6 columns-->
</div>

<!-- Lesson 2: Grid System in Bootstrap 4 END-->

<!-- Lesson 3: Offset in Grid System in Bootstrap 4 -->

<div class="row"><!-- A row consist of 12 columns-->

<div class="col-lg-4" style="background: red">Hello World</div><!--merging 4 columns-->
<div class="col-lg-4 offset-md-4" style="background: blue">Hello World</div><!--merging 4 columns-->
</div>

<div class="row"><!-- A row consist of 12 columns-->

<div class="col-lg-4 offset-md-4" style="background: red">Hello World</div><!--merging 4 columns-->
<div class="col-lg-4" style="background: green">Hello World</div><!--merging 4 columns-->
</div>

<!-- Lesson 3: Offset in Grid System in Bootstrap 4 END-->

<div style="background-color: black">
<!-- Lesson 4: Text formatting in Bootstrap 4 -->
<!-- Lesson 4.1: Text coloring in Bootstrap 4 -->
<p class="text-danger">Hello World</p>
<p class="text-success">Hello World</p>
<p class="text-info">Hello World</p>
<p class="text-warning">Hello World</p>
<p class="text-primary">Hello World</p>
<p class="text-secondary">Hello World</p>
<p class="text-muted">Hello World</p>
<p class="text-dark">Hello World</p>
<p class="text-light">Hello World</p>
<!-- Lesson 4.1: Text coloring in Bootstrap 4 END -->

<!-- Lesson 4.2: Text allignment in Bootstrap 4 -->
<p class="text-left">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-justify text-uppercase">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-justify text-lowercase">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-justify text-capitalize">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-right">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<p class="text-center">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>

<!-- Lesson 4.2: Text allignment in Bootstrap 4 END -->

<!-- Lesson 4.3: Backgrounds in Bootstrap 4 -->
<p class="text-center bg-danger">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-success">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-info">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-primary">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-secondary">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-warning">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-dark">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-light">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-white">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
</div>
<!-- Lesson 4.3: Backgrounds in Bootstrap 4 END -->

<!-- Lesson 4.4: Buttons in Bootstrap 4 -->

<button class="btn btn-primary">Home</button>
<button class="btn btn-secondary">Home</button>
<button class="btn btn-success">Home</button>
<button class="btn btn-info">Home</button>
<button class="btn btn-danger">Home</button>
<button class="btn btn-warning">Home</button>
<button class="btn btn-dark">Home</button>
<button class="btn btn-light">Home</button>
<button class="btn btn-default">Home</button>
<button class="btn btn-link">Home</button>
<br/>
<button class="btn-sm btn-primary">Home Small</button>
<button class="btn-lg btn-primary">Home large</button>
<br/>
<button class="btn btn-outline-primary">Home</button>
<button class="btn btn-outline-secondary">Home</button>
<button class="btn btn-outline-success active">Clicked Button</button>
<button class="btn btn-outline-info">Home</button>
<button class="btn btn-outline-danger">Home</button>
<button class="btn btn-outline-warning">Home</button>
<button class="btn btn-outline-dark">Home</button>
<button class="btn btn-outline-light">Home</button>
<button class="btn btn-outline-default disabled">click disabled</button>

<br/>
<br/>
<button class="btn btn-danger btn-block">Home</button><!--button in full horizontal width-->

<!-- Lesson 4.4.1: Buttons group in Bootstrap 4 END -->

<br/>
<br/>
<div class="btn-group">
  <button class="btn btn-danger">Home</button>
<button class="btn btn-outline-success">Home</button>
<button class="btn btn-primary">Home</button>
 
</div>
<br/>
<br/>
<div class="btn-group-vertical">
  <button class="btn btn-danger">Home</button>
<button class="btn btn-outline-success">Home</button>
<button class="btn btn-primary">Home</button>
</div>

<!-- Lesson 4.4.1: Buttons group in Bootstrap 4 END -->

<!-- Lesson 4.4: Buttons in Bootstrap 4 END -->

<!-- Lession 4.5: Typography in Bootstrap 4 -->

<p class="h1">Home</p>
<p class="h2">Home</p>
<p class="h3">Home</p>
<p class="h4">Home</p>
<p class="h5">Home</p>
<p class="h6">Home</p>

<br/>
<br/>

<p class="display-1">Home</p>
<p class="display-2">Home</p>
<p class="display-3">Home</p>
<p class="display-4">Home</p>

<!-- Lession 4.5: Typography in Bootstrap 4 END -->

<!-- Lession 4.6: Jumbotron & Badge in Bootstrap 4 -->

<!-- Badge -->
<button class="btn btn-danger"> Home <span class="badge badge-primary"> 2.0 </span></button>
<button class="btn btn-danger"> Home <span class="badge badge-success"> 2.0 </span></button>
<button class="btn btn-danger"> Home <span class="badge badge-info"> 2.0 </span></button>
<button class="btn btn-danger"> Home <span class="badge badge-secondary"> 2.0 </span></button>
<button class="btn btn-danger"> Home <span class="badge badge-dark"> 2.0 </span></button>
<button class="btn btn-danger"> Home <span class="badge badge-light"> 2.0 </span></button>
<button class="btn btn-danger"> Home <span class="badge badge-warning"> 2.0 </span></button>
<button class="btn btn-danger"> Home <span class="badge badge-default"> 2.0 </span></button>

<!-- Jumbotron to set specific background for header and footer-->
<div class="jumbotron jumbotron-fluid bg-primary">
<p>Home</p>
 
</div>

<!-- Lession 4.6: Jumbotron & Badge in Bootstrap 4 END -->

<!-- Lesson 4: Text formatting in Bootstrap 4 END -->

<!-- Lesson 5: image in Bootstrap 4 rounded-for round corner,img-thumbnail- for making the thumbnail boundary, d-block mx-auto- for keeping the image in center, img-fluid- for making the image as responsive -->
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
<!-- Lesson 5: image in Bootstrap 4 END -->

<!-- Lesson 5: Alert in Bootstrap 4 -->
<p class="alert alert-danger">Home <a href="#">Click Here</a> To continue <span class="close" data-dismiss="alert">&times;</span></p>
<p class="alert alert-success">Home <a href="#">Click Here</a> To continue <span class="close" data-dismiss="alert">&times;</span></p>
<p class="alert alert-info">Home <a href="#">Click Here</a> To continue <span class="close" data-dismiss="alert">&times;</span></p>
<p class="alert alert-warning">Home <a href="#">Click Here</a> To continue <span class="close" data-dismiss="alert">&times;</span></p>
<p class="alert alert-primary">Home <a href="#">Click Here</a> To continue <span class="close" data-dismiss="alert">&times;</span></p>
<p class="alert alert-secondary">Home <a href="#">Click Here</a> To continue <span class="close" data-dismiss="alert">&times;</span></p>
<p class="alert alert-dark">Home <a href="#">Click Here</a> To continue <span class="close" data-dismiss="alert">&times;</span></p>

<!-- Lesson 5: Alert in Bootstrap 4 END -->

<!-- Lesson 6: Modal in Bootstrap 4 -->

<button class="btn btn-primary" data-toggle="modal" data-target="#modal1">Open Modal</button>
<div class="modal fade" id="modal1">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <div class="modal-title">Modal Header</div></div>
<div class="modal-body">
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image> 
</div>
<div class="modal-footer">
  <button class="btn btn-danger" data-dismiss="modal">Close Modal</button>
</div>

  </div>

</div>
</div>

<!-- Lesson 6: Modal in Bootstrap 4 END -->

<!-- Lesson 7: Collapse in Bootstrap 4 -->
<div class="container">
 
  <a href="#pCollapse" data-toggle="collapse">Click here to Expand and Collapse</a>
<p class="collapse" id="pCollapse">Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello worldHello World Hello World Hello World v Hello World</p>
<br><br><br>
<button data-target="#paraCollapse" data-toggle="collapse">Click here to Expand and Collapse</button>
<p class="collapse" id="paraCollapse">Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello worldHello World Hello World Hello World v Hello World</p>


</div>


<!-- Lesson 7: Collapse in Bootstrap 4 END -->


<!-- Lesson 8: Cards in Bootstrap 4 -->

<div class="card" style="width: 300px; margin: 10px; float: left;">
 <image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
  <div class="card-body">
    <h2 class="card-title">MS Dhoni</h2>
    <h2 class="card-subtitle">indian Caption</h2>
    <p class="card-text">This is sample text</p>
    <a href="#" class="card-link">Read More...</a>
  </div>
  <div class="card-footer">footer</div>
</div>

<div class="card" style="width: 300px; margin: 10px; float: left;">
 <image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
  <div class="card-body">
    <h2 class="card-title">MS Dhoni</h2>
    <h2 class="card-subtitle">indian Caption</h2>
    <p class="card-text">This is sample text</p>
    <a href="#" class="card-link">Read More...</a>
  </div>
  <div class="card-footer">footer</div>
</div>

<div class="card" style="width: 300px; margin: 10px; float: left;">
 <image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
  <div class="card-body">
    <h2 class="card-title">MS Dhoni</h2>
    <h2 class="card-subtitle">indian Caption</h2>
    <p class="card-text">This is sample text</p>
    <a href="#" class="card-link">Read More...</a>
  </div>
  <div class="card-footer">footer</div>
</div>

<div class="card" style="width: 300px; margin: 10px; float: left;">
 <image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
  <div class="card-body">
    <h2 class="card-title">MS Dhoni</h2>
    <h2 class="card-subtitle">indian Caption</h2>
    <p class="card-text">This is sample text</p>
    <a href="#" class="card-link">Read More...</a>
  </div>
  <div class="card-footer">footer</div>
</div>

<!-- Lesson 8.1: Cards (Deck, Collapse, Group) in Bootstrap 4 -->
<!-- Lesson 8.1.1: Cards Group in Bootstrap 4 -->

<div class="container card-group">
<div class="card" style="width: 300px;">
 <image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
  <div class="card-body bg-info">
    <h2 class="card-title">MS Dhoni</h2>
    <h2 class="card-subtitle">indian Caption</h2>
    <p class="card-text">This is sample text</p>
    <a href="#" class="card-link">Read More...</a>
  </div>
  <div class="card-footer">footer</div>
</div>
<div class="card" style="width: 300px;">
 <image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
  <div class="card-body bg-info">
    <h2 class="card-title">MS Dhoni</h2>
    <h2 class="card-subtitle">indian Caption</h2>
    <p class="card-text">This is sample text</p>
    <a href="#" class="card-link">Read More...</a>
  </div>
  <div class="card-footer">footer</div>
</div>
<div class="card" style="width: 300px;">
 <image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
  <div class="card-body bg-info">
    <h2 class="card-title">MS Dhoni</h2>
    <h2 class="card-subtitle">indian Caption</h2>
    <p class="card-text">This is sample text</p>
    <a href="#" class="card-link">Read More...</a>
  </div>
  <div class="card-footer">footer</div>
</div>
</div>
<!-- Lesson 8.1.1: Cards Group in Bootstrap 4 END -->

<!-- Lesson 8.1.2: Cards Collapse in Bootstrap 4 -->
<div class="card" style="width: 300px;">
 <image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg" data-toggle="collapse" data-target="#msdBody"></image>
  <div class="card-body bg-info collapse" id="msdBody">
    <h2 class="card-title">MS Dhoni</h2>
    <h2 class="card-subtitle">indian Caption</h2>
    <p class="card-text">This is sample text</p>
    <a href="#" class="card-link">Read More...</a>
  </div>
</div>
<div class="card" style="width: 300px;">
 <image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg" data-toggle="collapse" data-target="#msdBodyTest"></image>
  <div class="card-body bg-info collapse" id="msdBodyTest">
    <h2 class="card-title">MS Dhoni</h2>
    <h2 class="card-subtitle">indian Caption</h2>
    <p class="card-text">This is sample text</p>
    <a href="#" class="card-link">Read More...</a>
  </div>
</div>
<!-- Lesson 8.1.2: Cards Collapse in Bootstrap 4 END -->

<!-- Lesson 8.1.3: Cards deck in Bootstrap 4 -->
<div class="card-deck-wrapper">
<div class="card-deck">
<div class="card" style="width: 300px;">
 <image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg">
  </image>
  <div class="card-body bg-info" id="msdBody">
    <h2 class="card-title">MS Dhoni</h2>
    <h2 class="card-subtitle">indian Caption</h2>
    <p class="card-text">This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text</p>
    <a href="#" class="card-link">Read More...</a>
  </div>
</div>
<div class="card" style="width: 300px;">
 <image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg">
  </image>
  <div class="card-body bg-info" id="msdBody">
    <h2 class="card-title">MS Dhoni</h2>
    <h2 class="card-subtitle">indian Caption</h2>
    <p class="card-text">This is sample text</p>
    <a href="#" class="card-link">Read More...</a>
  </div>
</div>
  <div class="card" style="width: 300px;">
 <image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg">
  </image>
  <div class="card-body bg-info" id="msdBody">
    <h2 class="card-title">MS Dhoni</h2>
    <h2 class="card-subtitle">indian Caption</h2>
    <p class="card-text">This is sample text</p>
    <a href="#" class="card-link">Read More...</a>
  </div>
</div>

</div>
 
</div>
<!-- Lesson 8.1.3: Cards deck in Bootstrap 4 END -->
<!-- Lesson 8.1: Cards (Deck, Collapse, Group) in Bootstrap 4 END-->
<!-- Lesson 8: Cards in Bootstrap 4 END-->

<!-- Lesson 9: Table in Bootstrap 4 -->

<table class="table table-sm table-sm-responsive table-danger table-striped table-hover">
  <tr>
    <td>Name</td>
    <td>Name</td>
    <td>Name</td>
  </tr>
  <tr>
    <td>Name</td>
    <td>Name</td>
    <td>Name</td>
  </tr>
  <tr>
    <td>Name</td>
    <td>Name</td>
    <td>Name</td>
  </tr>
</table>

<!-- Lesson 9: Table in Bootstrap 4 END-->

<!-- Lesson 10: Nav & Tabs in Bootstrap 4 -->
<div class="container">
  <ul class="nav nav-tabs"><!--nav-tabs similar of nav-pills-->
    <li class="nav-item">
      <a href="#one" class="nav-link active" data-toggle="tab">Home</a>
    </li>
    <li class="nav-item">
      <a href="#two" class="nav-link" data-toggle="tab">Contact Us</a>
    </li>
    <li class="nav-item">
      <a href="#three" class="nav-link" data-toggle="tab">Login</a>
    </li>
  </ul>
  <div class="tab-content">
    <li class="tab-pane" id="one"> This is first tab.</li>
    <li class="tab-pane" id="two">This is second tab.</li>
    <li class="tab-pane" id="three">This is third tab.</li>
  </div>
</div>


<!-- Lesson 10: Nav & Tabs in Bootstrap 4 END-->
<!-- Lesson 11: Navbar Responsive in Bootstrap 4 -->

<nav class="navbar navbar-expand-sm navbar-light bg-danger"><!--It does not come under any container class-->
  <a href="#" class="navbar-brand">LOGO</a>
  <button class="navbar-toggler" data-toggle="collapse" data-target="#cl" >
    <span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="cl">
    <span class="mr-auto"></span>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a href="#" class="nav-link">Home</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">About US</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">Contact US</a>
    </li>
  </ul>
  </div>
</nav>

<!-- Lesson 11: Navbar Responsive in Bootstrap 4 END-->

<!-- Lesson 12: Breadcrumb in Bootstrap 4 -->

<div class="container">
  <ul class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="#">Home</a>
    </li>
    <li class="breadcrumb-item">
      <a href="#">About US</a>
    </li>
    <li class="breadcrumb-item">
      <a href="#">Contact US</a>
    </li>
  </ul>
</div>

<!-- Lesson 12: Breadcrumb in Bootstrap 4 END-->

<!-- Lesson 13: Pagination in Bootstrap 4 -->
<div class="container">
  <div class="pagination">
 
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
</div> 
<div class="pagination pagination-lg">
 
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
</div> 

<div class="pagination pagination-sm">
 
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
</div> 

<div class="pagination pagination-sm">
 
<li class="page-item disabled"><a href="#" class="page-link">Previous</a></li>
<li class="page-item active"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</div> 

</div>


<!-- Lesson 13: Pagination in Bootstrap 4 END-->

<!-- Lesson 14: Carousel Slider in Bootstrap 4 -->
   
<div class="">
  <div id="car" class="carousel slide" data-ride="carousel" data-interval="2000">
    <ol class="carousel-indicators">
      <li class="" data-target="#car" data-slide-to="0" class="active"></li>
      <li class="" data-target="#car" data-slide-to="1"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
      <image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
 
    </div>
    <div class="carousel-item">
  <image class="img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
     
    </div>
    <div class="carousel-item">
  <image class="img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
     
    </div>
    </div>
  </div>
  <a href="#car" class="carousel-control-prev" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
<a href="#car" class="carousel-control-next" data-slide="next">
  <span class="carousel-control-next-icon"></span>
</a>


</div>

<!-- Lesson 14: Carousel Slider in Bootstrap 4 END-->

<!-- Lesson 15: Tooltip & Popover in Bootstrap 4 -->
<!--https://www.w3schools.com/bootstrap4/bootstrap_tooltip.asp-->
<div class="container">
  <br>
  <br>
  <a href="#" data-toggle="tooltip" data-title="Sample Text" data-placement="bottom">
ToolTip Sample
</a>
<br>
  <br>
  <!--https://www.w3schools.com/bootstrap4/bootstrap_popover.asp-->
  <a href="#" data-toggle="popover" data-title="Header" data-content="world Hello"  data-placement="right">
Popover Sample
</a>   
</div>


<!-- Lesson 15: Tooltip & Popover in Bootstrap 4 END-->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="bootstrap/js/jquery-3.3.1.slim.min.js"></script>
    <script src="bootstrap/js/popper.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();
});
</script>
<script>
$(document).ready(function(){
  $('[data-toggle="popover"]').popover();
});
</script>
  </body>
</html>

Monday, August 26, 2019

Angular Material Syntax

How to Apply Angular Material into Angular application?
By using angular command:
ng add '@angular/material'

How to start using angular material:
Step-1:
Import any module from angular material like MatButtonModule into app.modules.ts.

Step-2:
add MatButtonModule in imports array.

Step-3:
Use the directives in Html.

Ex:
<button mat-raised-button>Click Me</button>

<button mat-button>Click Me</button>

Note:

In the above approach suppose if we have to import so many modules from angular material then it will create so many imports. So to avoid this problem and keep the app.module clean and simple.

we will add all the required material modules in a separate module and only that module we will import into app.module.

To create a new module
ng g m materialModule

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material';

const materialComponent = [MatButtonModule]

@NgModule({
imports: [materialComponent],
exports: [materialComponent]
})
export class MaterialModuleModule { }


import { MaterialModuleModule } from './material-module/material-module.module';

imports: [
BrowserModule,
BrowserAnimationsModule,
MaterialModuleModule
],

Typography:

This is for setting the style and appearance of text.
<button mat-raised-button>Click Me</button>
<p>This is for page level Heading</p>
<div class="mat-display-4">This is display 4</div>
<div class="mat-display-3">This is display 3</div>
<div class="mat-display-2">This is display 2</div>
<div class="mat-display-1">This is display 1</div>


<p>This is for section level Heading</p>
<div class="mat-headline">This is heading for h1</div>
<div class="mat-title">This is heading for h2</div>
<div class="mat-subheading-2">This is heading for h3</div>
<div class="mat-subheading-1">This is heading for h4</div>

<p>This is for normal text writing</p>
<div class="mat-body-1">This is heading for body</div>
<div class="mat-body-2">This is heading for body</div>
<div class="mat-caption">This is heading for body</div>








Saturday, August 24, 2019

Angular Guide

step-1:
Install node js.Download from internet and with installation of node js it also install npm.

step-2;
install VS code.

step-3:
npm install -g @angular/cli
From anywhere you run this command, it will install the angular to your machine.

To check the node js version:
node -v

To check npm version:
npm -v

Angular commands:
To check angular cli version:
a)ng --version

The moment we write
b)ng new CustomerApp
 1)It will get all the basic angular packages under node_modules folder.
 2)It creates project structure.
 3)It will put testing framework.
 4)It will put sample code.
 5)It will put webpack configuration.
 6)It will put typescript configuration.
 7)It will put angular configuration.

c)ng serve --open.  it will open the angular application in browser.
d)ng g c ComponentName
  or
  ng generate component ComponentName.
e)ng build --prod. to compile and build angular application for production and get angular js files to a dist-Appname folder for deploy.

f)ng add @angular/material. for adding angular material into angular app.
g)ng add @angular/flex-layout. for adding angular flex layout into angular app.

Type script commands:
npm install -g typescript. To install type script in my computer,
tsc helloworld.ts -> To generate Javascript file after compilation of typescript.
node helloworld.js -> to run javascript file in VS Code Terminal.

variable declaration in type script:
customerName:string="Raman';

function declaration in type script:
function add(num1:number, num2:number):number{
return num1+num2;
}

function declaration in type script: when one of the passing parameter is optional.
function add(num1:number, num2?:number):number{
return num1+num2;
}
here num2 is optional.
note:
We can have any number of the optional parameter but all of them must come after the required parameters.

function declaration in type script: when one of the passing parameter is set to default value.
function add(num1:number, num2:number=10):number{
return num1+num2;
}

In typescript how to call a child class constructer by:
super(managerName);
Here in typescript, we don't have the concept of constructor overloading.

As there is no protected access modifier in javascript so protected treated as public.

A special way to give access-modifier, declaration, and initialization using a parameterized constructor

constructor(private x?:number,private x?:number)
{
no body required.
}

Module: In typescript, any file consists of classes and having at least one exported class is a module.

Any class to be used outside of the file must be prefixed with the export keyword.

import: In typescript, we can export multiple classes from a module based on what are the classes we want.
import {A,B,C} from "./abcdef"
Here abcdef is typescript file or we can say module in which only A, B, C are exported.
and "./" represents current folder location.

In each file, we can export one or more types these types can be classes, functions, simple variables and objects.


Angular Started:

A component is building blocks for angular.
A component consists of a class and template that represents a view.

angular helps the data values to push into HTML and turn user responses into actions and values updates.

Communication between class component and template: 
There 4 ways of bindings in between Html Template and Component class:
https://www.youtube.com/watch?v=rH-xfNvpm_o&list=PLC3y8-rFHvwgKhaLU8GTyF-5Bb8qT-wzV&index=3
1)Interpolation {{}}  This is one-way data-binding from component class to Html Template.
<h1>{{ pageTitle }}</h1>
2)Property binding [] This is also a one-way data-binding from component class to Html Template. This helps to bind the data to the property of an Html element.
<img [src]="imageUrl" alt="Image">
3)Event Binding() This is also one way binding from Html template to Component Class. With Event Bindings, we can use handlers on user interactions.
<div>
<button (click)="incrementCounter()">Click Me</button>
<p>Clicked Value count: {{count}} </p>
</div>
4)Two-way Binding [()] This combines property and event bindings in a single notation. This ensures that modal and views are always in sync.
<div>
<form name="shankar">
<input type="text" name="shankar" [(ngModel)]="name">
</form>
<p>Welcome: {{name}} </p>
</div>

Split Two-way Binding:
<div>
<input type="text" [ngModel]="userName" (ngModelChange)="userName=$event">
<p>Welcome: {{userName}} </p>
</div>

But we can write multiple lines of code if a change in textbox entry, see below
<div>
<input type="text" [ngModel]="userName" (ngModelChange)="greetOM($event)">
<p>Welcome: {{userName}} </p>
</div>
--method in Component class
greetOM(updatedvalue) {
this.userName = updatedvalue;
if (updatedvalue == "OM")
alert("Welcome back OM");

}

Getters and Setters:

<div>
<input type="text" [(ngModel)]="CustomerName">
<p>Welcome: {{CustomerName}} </p>
</div>

private _customerName: string = "";
get CustomerName(): string {
return this._customerName;
}
set CustomerName(value: string) {
this._customerName = value;
if (value == "OM")
alert("Hello OM");
}

ViewChild Decorator(How to access the dom element in the respective component class using ElementRef)

Step-1:
attach a template ref variable on Html element.
<div>
<input #nameRef type="text" [(ngModel)]="CustomerName">
<p>Welcome: {{CustomerName}} </p>
</div>
step-2:
Create a property of type ElementRef that will hold the reference to this html element.
@ViewChild('nameRef',{static:false}) elementReference: ElementRef;
step-3:
attach the viewchild decorator specifying template reference variable
@ViewChild('nameRef',{static:false}) elementReference: ElementRef;
step-4:
specify what to do in ngAfterViewInit cycle after implementing in component.
ngAfterViewInit() {
this.elementReference.nativeElement.focus();
console.log(this.elementReference);
}

Interaction between different components (Parent and Child)

1. Input() Decorator
2. Getters and Setters
3. ngOnchanges()
4. Template Reference Variable
5. Viewchild()
6. Emitting events
7. Services

An angular component is reusable.
When component is reffered inside another component this established a parent child relation between components.
1. Input() Decorator:
Step-1:
Create one more component saying, child.
Step-2:
Then refer the child selector in parent Html.

A single parent login component maintains the login states and informations and passes to the all child components using Input decorator.

Refer the parent component property value in child component property.
<app-child [loggedIn]="userLoggedIn"></app-child>
Pass the parent property value to the child selector as a child property value. and then using input decorator receive it in child component and write the code for received value.
@Input('loggedIn') loggedFlag: boolean;

<p *ngIf="loggedFlag">Welcome back!</p>

2. Getters and Setters:
Child Component.ts
message: string;
private _loggedFlag: boolean;
get LoggedIn(): boolean {
return this._loggedFlag;
}

@Input()--indicates that value will be passed from parent component.
set LoggedIn(value: boolean) {
this._loggedFlag = value;
if (value == true)
this.message = "Welcome Back OM";
else
this.message = "Please login";
}

child Html
{{message}}

App compnent.Html
<button (click)="userLoggedIn=true">Log In</button>
<button (click)="userLoggedIn=false">Log Out</button>
{{userLoggedIn}}
<app-child [LoggedIn]="userLoggedIn"></app-child>

App component.ts
userLoggedIn : boolean;

3. ngOnchanges():
Step-1:
First implement onchanges to child component
export class ChildComponent implements OnChanges {

Step-2:
declare LoggedIn Property with input decorator.
message: string;
@Input() LoggedIn: boolean
Step-3:
Work on ngOnChanges method whenever there is a change in input property of the component.
ngOnChanges(changes: SimpleChanges) {
console.log(changes);
const loggedValue = changes["LoggedIn"];
if (loggedValue.currentValue == true)
this.message = "Welcome Back OM";
else
this.message = "Please log in";
}

child Html
{{message}}

App compnent.Html
<button (click)="userLoggedIn=true">Log In</button>
<button (click)="userLoggedIn=false">Log Out</button>
{{userLoggedIn}}
<app-child [LoggedIn]="userLoggedIn"></app-child>

App component.ts
userLoggedIn : boolean;

note:
ngOnChanges work only with the child component.
we should use getter and setters approach if there are only one property changes. But if there are a lot of property we have to keep track of then ngOnChanges is a suitable choice.
Here we have options for prev value changes, current value changes, and first change.

4. Template Reference Variable:
A parent component can directly access the properties and function of the child component.
In App.component.Html we declared the child element with template reference. With this reference name we are accessing the property and functions directly of a child component.
<app-child #child [LoggedIn]="userLoggedIn"></app-child>
{{child.name}}
<button (click)="child.GreetOm()">Greet Me</button>

Child component
name = "OM";
GreetOm() {
alert("Hey Om");
}

5. Viewchild():
Step-1:
Create a property that will hold the child component reference in parent component.
@ViewChild(ChildComponent, { static: false }) childComponentRef: ChildComponent;

implement ngAfterViewInit on the parent component.

ngAfterViewInit() {
this.childComponentRef.message = "Message from parent Component";
}

6. Emitting events:
Using Output decorator, A common method will be written in a parent component which all the child's components will execute by sending event using EventEmitter.
using an EventEmitter class the child components emits an event with passing parameter.
Using EventEmitter and Output parameter we can out any custom event to the parent.

Child Html-click generates a event
<button (click)="greetingToParent()">Send to Parent</button>

Child Component-emits the custom event to out.
@Output() greetEvent = new EventEmitter();
name = "OM";
greetingToParent() {
this.greetEvent.emit(this.name);
}

Here greetEvent is the custom event for parent to bind with its own method.
<app-child (greetEvent)="GreetFromChildToParent($event)"></app-child>

Here $event helps to pass the parameter

GreetFromChildToParent(message: string) {
alert("Message sender from child" + message);
}



7. Services [Using a Service]
This option tells the way to communicate between components using a service.
Here we will use the subject for component interaction.
It uses subscribing techniques. Like how many child components subscribe to the subject that many components will get responses from the parent component.

In this approach, there could be no relation between the components.

step-1:
Create a subject and express the subject as an observable.
export class InteractionService {
constructor() { }
private _teacherMessageSource = new Subject<string>();
teachermessage$ = this._teacherMessageSource.asObservable();
Step-2:
Send the message from the teacher component to the subject.
sendmessage(message: string) {
this._teacherMessageSource.next(message);
}
Step-3:
Subscribe to the subject from the student components.
So that students can react to any messages received from the teacher.
<h1>Teacher</h1>
<button (onclick)="greetstudent()">Greet student</button>
<button (onclick)="appreciateStudent">Appreciate Student</button>
<app-child></app-child>

constructor(private _interactionService: InteractionService){
}
greetstudent() {
this._interactionService.sendmessage("Good Morning");
}
appreciateStudent() {
this._interactionService.sendmessage("Well Done");
}





Angular in one bucket:
https://www.centric.eu/NL/Default/Craft/Blogs/2018/01/25/Angular-components-How-to-talk-to-your-children-and-listen-to-what-they-have-to-say

Angular Material:
https://www.youtube.com/watch?v=bV8emCBmFHk&list=PLC3y8-rFHvwilEuCqFGTL5Gt5U6deIrsU


Temp:
https://gaana.com/playlist/gaana-dj-ye-jo-mohabbat-hai-rajesh-khanna
https://www.youtube.com/watch?v=oMgvi-AV-eY
https://www.youtube.com/watch?v=FV2MXOygDTM
https://www.youtube.com/watch?v=cxGh2YFehvs
https://cli.angular.io/
https://www.youtube.com/results?search_query=typescript+tutorial+for+beginners
https://www.youtube.com/watch?v=xqYD8QXJX9U
https://angular.io/guide/http
https://code.visualstudio.com/docs/getstarted/introvideos
https://alligator.io/angular/angular-material-2/
https://blog.angularindepth.com/angular-flex-layout-the-masquerade-58fb58d0ab45
https://blog.angularindepth.com/angular-flex-layout-flexbox-and-grid-layout-for-angular-component-6e7c24457b63
https://www.toptal.com/angular/angular-5-tutorial
https://www.npmjs.com/package/angular-walkthrough
https://www.edureka.co/blog/angular-tutorial/
https://www.youtube.com/watch?v=r-xlmXE7bJU
https://www.youtube.com/watch?v=60k3EOu2Pf8
https://www.youtube.com/watch?v=_g1Cb1u9rLk
https://www.youtube.com/watch?v=h3iK6uItrqA
https://www.youtube.com/watch?v=WuDC_6gyvcQ
https://www.youtube.com/watch?v=htPYk6QxacQ
https://www.youtube.com/watch?v=UnKsoCeTdEI
https://www.youtube.com/watch?v=_4UWa8Vw3M0
https://www.youtube.com/watch?v=-bMdCxCmDRk
https://www.youtube.com/watch?v=kFTmoLm9Jwg
https://www.youtube.com/watch?v=DAUlZO2RALw
https://www.itechtics.com/copy-urls-of-all-open-tabs-in-all-browsers-chrome-firefox-opera-ie/
https://superuser.com/questions/117754/is-there-a-way-to-copy-urls-from-all-open-tabs-in-a-google-chrome-or-other-brow
https://www.udemy.com/topic/angular/free/

https://www.youtube.com/channel/UC80PWRj_ZU8Zu0HSMNVwKWw/playlists

Form Control in Angular:
https://www.concretepage.com/angular-2/angular-2-formcontrol-example

Text Formatting for kendo Grid:
https://www.c-sharpcorner.com/blogs/text-formatting-in-kendo-ui-grid-with-angular6

Install froala editor in angular:

https://npm.runkit.com/angular2-froala-wysiwyg-base

1)npm install angular2-froala-wysiwyg --save

2)"node_modules/font-awesome/css/font-awesome.css",
  "node_modules/froala-editor/css/froala_editor.pkgd.min.css"

3)"node_modules/jquery/dist/jquery.min.js",
  "node_modules/froala-editor/js/froala_editor.pkgd.min.js"
  
4)<div [froalaEditor] [(froalaModel)]="node.Why"></div>

Angular tricks:
In this case while binding value to Html using interpolation, instead of binding directly property we will use object member as a property to bind.

How to use *ngFor:
<app-blog-post-tile *ngFor="let post of blogPost" [post]="post"> </app-blog-post-tile>

Using Pipes in Angular
ng generate pipe trucncate
return of this function will render back to the control.
Pipe is a function which prcessess our data from an input and return an output
<p class="card-text">{{ post.summary | truncate[30] }}</p>

here 30 is the passing parameter.
return of trucate function will be render here to the paragraph.
write what you want to do inside transform function.
We can define common functions here that can be reused like LPAD(18,'0').
It is possible to calling pipe inside Angular components. For that first we have to pass the the pipe to the constructor. And also we have to add the pipe in the provider.

Child to parent call:
Child component should not be aware of parent method. It should just trigger an event that hey click happen at the child component level. It's parent component job is to listen to this event and do the right thing. child will use @Output and EventEmitter to send the event.
Whatever we the name we will give the EventEmiter name has to be bind by parent.

Using View Encapsulation
Css applied to component will not impact to any other component.
Angular styling is restricted to comonent.
But there is a way to remove the restriction and apply to everywhere wherever it loads
encapsulatio:ViewEncapsulation.None; by default it s Emulated so restricted to particular component only.

Using host selector?
Using ViewChildren:
@ViewChild('nameRef',{static:false}) blogPostTileComponent: BlogPostTileComponent -child
@ViewChildren('nameRef',{static:false}) blogPostTileComponents: QueryList<BlogPostTileComponent> -children

expandAll()
{
this.blogPostTileComponents.Foreach(e=>e.ShowFullSumary());
}

Creating and using service:
Move the logics from component to service.
Business logics should be kept inside services.
We will inject the service to the component for use because we have specify in the provider.
constructor(private blogDataService: BlogdataService){}
this.bloggPosts=this.blogDataService.getData();

Understanding smart vs dumb components
Feeded data component is  dumb component. It is also named as presentational componet.It is reusable.
Controlled component is a smart component. It will have service calling.

commonNote:
Pipes and services are mentioned in a provider. What is the use of provider?

An angular application is a tree of components.

ag-Grid row column operations.
https://www.youtube.com/watch?v=zL-MpeTZDkw&list=PLT2UBNZhcQdmnbhY8Y3ElucziqcwFFaOw&index=2
gridReady Event and Callback

How to use ngClass
[ngClass]="(loop > eightDNumber)? 'bg-warning border border-dark my-2':'bg-success border border-dark my-2'"

Build for production before deployment.
ng b --prod

https://stackoverflow.com/questions/52477152/moment-is-not-defined-in-angular

https://stackoverflow.com/questions/53327329/aggrid-angular-add-element-icon-on-a-row-column

https://github.com/ag-grid/ag-grid/issues/212

For global filter in kendo grid
https://stackblitz.com/edit/angular-9tdyza-kjcj9a?file=app/app.component.ts

https://decembersoft.com/posts/typescript-vs-csharp-linq/#where

No column menu in ag grid in community version.
https://www.ag-grid.com/javascript-grid-column-menu/

How to apply kendo gridd:
step-1
Install kendo grid
https://www.telerik.com/kendo-angular-ui/getting-started/
ng add @progress/kendo-angular-grid

Step-2:
Kendo grid feature.
https://www.telerik.com/kendo-angular-ui/getting-started/
https://www.telerik.com/kendo-angular-ui/components/grid/filtering/reusable-filter/
https://www.youtube.com/watch?time_continue=318&v=AAgAWJEbWIg

Using Tslint for correcting codes.
https://www.codeproject.com/Articles/1261317/Analyze-Fix-your-Angular-6-code-using-TSLint

Implementation of froala:
Froala license is domain url based.

Environmental variable has to be used with backtick character in angular
`${environment.variableName}`

step-1:
add these lines to package.json

"angular-froala-wysiwyg": "2.7.1",
"froala-editor": "2.7.1",

step-2:
run npm install
npm i

It will add the same in package.lock

Step-3:
Update angular.json"styles": [
              {
                "input": "node_modules/@progress/kendo-theme-default/dist/all.css"
              },
              "src/styles.scss",           
              "node_modules/froala-editor/css/froala_editor.pkgd.min.css",
              "node_modules/froala-editor/css/froala_style.min.css",
              "node_modules/font-awesome/css/font-awesome.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/froala-editor/js/froala_editor.pkgd.min.js"
            ]

Step-4:
Include the module

Step-5:
Include the directive in html and input options for directive.

Some important links related froala:
https://stackoverflow.com/questions/51387254/froala-editor-hide-image-edit-option-in-angular-6

'fullscreen','bold','italic','underline','strikeThrough','subscript','superscript','fontFamily','fontSize','align','clearFormatting','color','paragraphStyle','paragraphFormat','formatOL','formatUL','indent','outdent','quote','insertLink','emoticons','specialCharacters','insertHR','undo','redo','insertTable','html'

['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize'
  , 'align', 'clearFormatting', 'color', 'paragraphStyle', 'paragraphFormat', 'formatOL', 'formatUL', 'indent', 'outdent'
  , 'quote', 'insertLink', 'emoticons', 'specialCharacters', 'insertHR', 'undo', 'redo', 'insertTable', 'html']


How to load an Angular project:
Git Clone the application
open node js command prompt
navigate to package json file location then 'npm install'.

Export Excel Feature from Kendo Grid:
https://www.telerik.com/kendo-angular-ui/components/excelexport/filtering/


How to create a custom environment for sandbox in Angular:
https://medium.com/@balramchavan/configure-and-build-angular-application-for-different-environments-7e94a3c0af23

Nice Angular Tutorials:
https://www.youtube.com/watch?v=H2TUbmlh4YQ&list=PLLhsXdvz0qjL1HVD2jAtlvoDmS5qj0OvA



Things to carry while travelling

 Kapda 1)3 jeans. 2)5 chaddi. 3)4 short pant. 4)1 taulia. 5)1 Topi. 6)1 paijama. 7)3 T-shirt. 8)3 Shirt. 9)Ganji 5. 10)1 inner ware mota. Fr...