Tag: first

ngIf, index, first, last: Ionic 2

Today lets see how we can track the index number of the loop. i.e., the number of completed iterations in a loop. We shall also learn *ngIf conditional operator and its usage.

Related Read:
Basics of Page Component: Ionic 2

*ngIf Conditional Operator

ngIf is called conditional operator because it operates based on conditions i.e., if the conditional statement it has been assigned is true, then the node it is attached to will be rendered or else it’ll not. *ngIf takes boolean values.

Example: If *ngIf is attached to a div and the condition is false, then the div it has been attached to won’t be added to the DOM. If the condition is true, then div is added to the DOM.

Video Tutorial: ngIf, index, first, last: Ionic 2


[youtube https://www.youtube.com/watch?v=Cb4a-oh_yXM]

YouTube Link: https://www.youtube.com/watch?v=Cb4a-oh_yXM [Watch the Video In Full Screen.]


index, first, last
While we are looping through some array elements inside template file we can know the index of the loop using index variable. We can use ngIf and do something at the first iteration using first variable and similarly we can know the last iteration using last variable.

Source Code: src/pages/home/home.ts

<ion-list no-lines>
  <ion-item *ngFor="let company of companies; 
                     let i = index; 
                     let lst = last; 
                     let fst = first;">
    {{i+1}}. {{company.name}}  
    <span *ngIf="lst"> - Am last!</span>
    <span *ngIf="fst"> - Am first</span>
  </ion-item>
</ion-list>

inside *ngFor we have initiated and assigned index value to variable i, last index value to variable lst and first index value to variable fst.

Inside ion-item we are using *ngIf to check if the iteration is first iteration, if so add ‘Am first’ message besides the first list item i.e., beside Microsoft. We also check if the iteration is a last iteration, if so we display ‘Am last!’ message beside the last item in the list i.e., beside IBM.

Output:

  1. Microsoft – Am first
  2. Apple
  3. Google
  4. Oracle
  5. IBM – Am last!

jQuery Filter Methods To Narrow Selection

In this video tutorial we illustrate the use of jQuery filter methods to narrow our selection.

The 6 jQuery filter methods are:
first()
last()
eq()
slice()
not()
filter()

In this example, we take some list of images and using CSS we make the display property to none. Hence hiding all the images from being displayed.
Using filter methods we write our jQuery script to fetch elements(images).

HTML code
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<html>
 <head><title>Filter Methods to narrow the selection!</title>
 
  <style type="text/css">
   li {
    display: none;
   }
  </style>
 
 </head>
 <body>
    <ol>
      <li>
         0<img src="images/aperture.png" width="79" height="79" />
      </li>
      <li>
         1<img src="images/coda.png" width="79" height="79" />
       </li>
      <li class="no">
         2<img src="images/finder.png" width="79" height="79" />
      </li>
      <li>
         3<img src="images/photoshop.png" width="79" height="79" />
      </li>
      <li class="no">
         4<img src="images/safari.png" width="79" height="79" />
      </li>
    </ol>
 
    <button>Display!</button>                
 
   <script type="text/javascript" src="script/jquery-1.8.1.min.js"></script>
   <script type="text/javascript" src="script/my_script.js"></script>
 </body>
</html>

Here we have 1 button and 5 images. Images being numbered from 0 to 4.
Two of the list items have a class name of no.

jQuery code: first()
my_script.js

1
2
3
4
5
6
7

$(document).ready( function() {
 
  $("button").click( function() {
    $("ol").children().first().css( 'display', 'inline' );
  });
 
});

Here we are using chain methods and DOM Tree Traversal.
Also CSS method of jQuery. Also watch jQuery Methods and CSS: Restaurant Application

Here, we select ol tag and fetch all its children, and inturn select its first child, to which we apply the css property of display to inline.

Similarly,

jQuery code: last()
my_script.js

1
2
3
4
5
6
7

$(document).ready( function() {
 
  $("button").click( function() {
    $("ol").children().last().css( 'display', 'inline' );
  });
 
});

Here, we select ol tag and fetch all its children, and inturn select its last child, to which we apply the css property of display to inline.

jQuery code: eq()
my_script.js

1
2
3
4
5
6
7

$(document).ready( function() {
 
  $("button").click( function() {
    $("ol").children().eq(4).css( 'display', 'inline' );
  });
 
});

Here, we select ol tag and fetch all its children, and inturn select its 4th child using its index number, to which we apply the css property of display to inline.

jQuery code: slice()
my_script.js

1
2
3
4
5
6
7

$(document).ready( function() {
 
  $("button").click( function() {
    $("ol").children().slice(1, 4).css( 'display', 'inline' );
  });
 
});

Here, we select ol tag and fetch all its children, and inturn select its children from index 1 to 4 i.e., image 1, 2 and 3, to which we apply the css property of display to inline.

jQuery code: not()
my_script.js

1
2
3
4
5
6
7

$(document).ready( function() {
 
  $("button").click( function() {
    $("ol").children().not(".no").css( 'display', 'inline' );
  });
 
});

Here, we select ol tag and fetch all its children, and inturn select its children which do not have the class name no i.e., image 0, 1 and 3, to which we apply the css property of display to inline.

jQuery code: filter()
my_script.js

1
2
3
4
5
6
7

$(document).ready( function() {
 
  $("button").click( function() {
    $("ol").children().filter(".no").css( 'display', 'inline' );
  });
 
});

This is opposite of not() method.
Here, we select ol tag and fetch all its children, and inturn select its children which has the class name no i.e., image 2 and 4, to which we apply the css property of display to inline.

Video Tutorial: jQuery Filter Methods To Narrow Selection


[youtube https://www.youtube.com/watch?v=DGoCpgi1LK4]

YouTube Link: https://www.youtube.com/watch?v=DGoCpgi1LK4 [Watch the Video In Full Screen.]



These are the 6 filter methods of jQuery, using which we can narrow down our selection.

I’m using images to make sure the learning stays colorful and not pale boring text. These filter methods will come in handy in later stages wherein we under take some complex application developments. These type of methods save us time and the number of line of code, to achieve the same thing manually.