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 is 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.
<button ng-click="[A FUNCTION CALL] > Click! < button> <span ng-show="[An boolean Expression] > The element < /span>
After 3 clicks:
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 know the password is 12345). Here the click event is done using 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.
< form (nameOfEventBinder)="Function Call" > < /form > < button type="nameOfEventBinder" > Click! < button > < span ng-if="[An boolean Expression] > The element < /span >
Example: test.html file:
After giving the correct password i.e. 12345:
After wrong Password:
- AngularJS | ng-show Directive
- JQuery | Get the text of a span element
- JQuery | Change the text of a span element
- How to style the host element of the component in AngularJS?
- span Tag | HTML
- How to change a span to look like a pre with CSS?
- Difference between <div> and <span> Tag in HTML
- HTML | DOM Span Object
- HTML | <col> span Attribute
- HTML | span Attribute
- CSS | column-span Property
- HTML | DOM Column span Property
- HTML | DOM ColumnGroup span Property
- HTML | <colgroup> span Attribute
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.