Un elemento span se utiliza para agrupar elementos en línea en un documento. Se puede usar para hacer un enlace a una parte particular del documento que puede estar sujeta a una acción particular basada en eventos DOM.
El elemento span se puede usar para resaltar, mostrar, ocultar o realizar cualquier acción en particular en función de una función.
Angular proporciona varias directivas mediante las cuales el elemento span se puede manipular fácilmente. Algunos de los ejemplos se dan a continuación:
Enfoque 1: esta es una calificación básica que proporciona código HTML. Aquí los elementos de intervalo son los símbolos de estrella marcados y marcados. ng-show y ng-hide
se utilizan para mostrar u ocultar el símbolo de estrella marcado o no marcado. Aquí, el clic se utiliza para manipular el valor de una variable que, a su vez, muestra el símbolo de estrella marcada.
Sintaxis:
<button ng-click="[A FUNCTION CALL] > Click! < button> <span ng-show="[An boolean Expression] > The element < /span>
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Angular Span element on click</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.checked {
color: orange;
}
.rateButton {
border-radius: 12px;
background-color: goldenrod;
}
</style>
</head>
<body>
<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>
Salida:
Antes de hacer clic: 
Después de 3 clics:
Enfoque 2: este ejemplo muestra cómo se puede ocultar una parte del texto usando span y ng-if para espectadores selectivos (aquí, quienes saben que la contraseña es 12345). Aquí, el evento de clic se realiza utilizando la técnica de enlace de eventos de angular. El tipo de enlace de eventos utilizado se denomina enlace de eventos de destino. El NgForm se usa para activar las funciones usando la técnica de vinculación de eventos. En esta técnica, el evento está entre paréntesis() y el nombre del evento es el tipo del botón que se pretende crear.
Sintaxis:
< form (nameOfEventBinder)="Function Call" > < /form > < button type="nameOfEventBinder" > Click! < button > < span ng-if="[An boolean Expression] > The element < /span >
Ejemplo: archivo test.html:
<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>
archivo de prueba.css:
.hidden{
font-weight: bold;
}
.show{
color: green;
}
.error{
color: red;
}
archivo de prueba.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;
}
}
Salida:
Inicialmente: 
Después de dar la contraseña correcta, es decir, 12345: 
Después de una contraseña incorrecta:
Publicación traducida automáticamente
Artículo escrito por anushil8991 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA