Open In App

How to show a span element for each rows clicked in AngularJS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see how to display a span element for each row clicked in AngularJS. A span element is used to group in-line elements in a document. It can be used to make a hook to a particular part of the document which may be subject to a particular action based on DOM events. The span element can be used to highlight, show, hide or do any particular action on it based on a function. Angular provides several directives by which the span element can be easily manipulated. Some of the examples are given below: 

Approach 1: This is a basic rating giving HTML code. Here the span elements are the checked and checked star symbols. The ng-show and ng-hide are used to show or hide the checked or unchecked star symbol. Here the click is used to manipulate the value of a variable which in turn shows the checked star symbol. 

Syntax:

<button ng-click="[A FUNCTION CALL] > 
    Click! 
< button>
<span ng-show="[An boolean Expression] > 
    The element 
< /span>

Example 1: In this example, the span element for every row clicked will be displayed in AngularJS.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Angular Span element on click
    </title>
    <script src=
    </script>
    <link rel="stylesheet" href=
    <style>
        .checked {
            color: orange;
        }
          
        .rateButton {
            border-radius: 12px;
            background-color: goldenrod;
        }
          
        table {
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
  
<body style="text-align: center">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h3>
        Displaying the span element for
        each rows clicked in AngularJS
    </h3>
    <div ng-app="mainApp" 
         ng-controller="RatingController">
        <table>
            <tr>
                <td>Rate Product</td>
                <!--The first star is either checked or
                    unchecked based on the value of the
                    rating variable and same for the 
                    rest 4 stars-->
                <td
                    <span ng-show="rating>=1" 
                          ng-hide="rating<1
                          class="fa fa-star checked">
                    </span
                    <span ng-hide="rating>=1" 
                          ng-show="rating<1
                          class="fa fa-star unchecked">
                    </span
                    <span ng-show="rating>=2" 
                          ng-hide="rating<2
                          class="fa fa-star checked">
                    </span
                    <span ng-hide="rating>=2" 
                          ng-show="rating<2
                          class="fa fa-star unchecked">
                    </span
                    <span ng-show="rating>=3" 
                          ng-hide="rating<3
                          class="fa fa-star checked">
                    </span
                    <span ng-hide="rating>=3" 
                          ng-show="rating<3
                          class="fa fa-star unchecked">
                    </span
                    <span ng-show="rating>=4" 
                          ng-hide="rating<4
                          class="fa fa-star checked">
                    </span
                    <span ng-hide="rating>=4" 
                          ng-show="rating<4
                          class="fa fa-star unchecked">
                    </span
                    <span ng-show="rating>=5" 
                          ng-hide="rating<5
                          class="fa fa-star checked">
                    </span
                    <span ng-hide="rating>=5" 
                          ng-show="rating<5
                          class="fa fa-star unchecked">
                    </span
                </td>
                <td>
                    <button ng-click="Rating()" 
                            class='rateButton'> Click 
                    </button>
                </td>
            </tr>
        </table>
    </div>
    <script>
        var app = angular.module("mainApp", []);
        app.controller('RatingController', function($scope) {
            $scope.rating = 0;
            $scope.Rating = function() {
                $scope.rating++;
            };
        });
    </script>
</body>
</html>


Output:

 

Approach 2: This example shows how a part of the text can be hidden using the span and ng-if for selective viewers(here who knows the password is 12345). Here the click event is done using the event binding technique of angular. The Type Of event binding used is called Target event binding. The NgForm is used to trigger the functions using the event binding technique. In this technique, the event is bound in parenthesis () and the name of the event is the type of the button that is intended to create it. 

Syntax:

<form (nameOfEventBinder)="Function Call"> </form> 
<button type="nameOfEventBinder"> Click! <button>
<span ng-if="[An boolean Expression]> The element </span>

Example 2: In this example, the form containing the password field, is used where the hidden text data will render the data according to the input.

test.html




<h1>GeeksforGeeks</h1>
<h3>
    Displaying the span element for
    each rows clicked in AngularJS
</h3>
<table>
    <tr>
        <td
            The Hidden text is: 
            <span *ngIf="show==0" class="hidden">
                text is hidden here
            </span>
            <span *ngIf="show==1" class="show">
                This is the hidden text!!
            </span
            <span *ngIf="show==2" class="error">
                Wrong Password
            </span
        </td>
    </tr>
    <tr>
        <td>
            <label for="psw"
                Enter password to reveal text 
            </label>
            <form (submit)="check(form)" 
                  (reset)="reset(form)" 
                  #form='ngForm'>
                <input type="password" 
                       ngModel #psw="ngModel"
                       name="psw" 
                       placeholder="Enter Password" 
                       width="20000">
                <button type="submit"
                    submit 
                </button>
                <button type="reset">
                     reset 
                </button>
            </form>
        </td>
    </tr>
</table>


est.css




h1,
h3 {
  text-align: center;
}
h1 {
  color: green;
}
.hidden {
  font-weight: bold;
}
.show {
  color: green;
}
.error {
  color: red;
}
table {
  margin-left: auto;
  margin-right: auto;
}


test.ts




import { Component } from "@angular/core";
import { NgForm } from "@angular/forms";
@Component({
  selector: "app-test-html-component",
  templateUrl: "./test.html",
  styleUrls: ["./test.css"],
})
export class TestComponent {
  show: any = 0;
  check(form: NgForm) {
    if (form.value.psw === "12345") {
      this.show = 1;
    } else {
      this.show = 2;
    }
  }
  reset(form: NgForm) {
    form.value.psw = "";
    this.show = 0;
  }
}


Output: From the below output, Initially, the text that will display is “text is hidden here”. While entering the correct password i.e. 12345, it will display the text “This is the hidden text!!” in green color, whereas, when the entered password is incorrect then it will display the “Wrong Password” in red color.

 



Last Updated : 08 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads