Angular JS in Service Portal | Structural Directives |

[Samaksh Wani]

Structural Directives:- These Change the Document Object Manipulation Layout by adding and removing the DOM Elements.

• ng-if :-ngIf is used to display or hide the DOM Element based on the expression value assigned to it. The expression value may be either true or false.               

   var name ="samaksh";  // JS

   <div ng-if="name==samaksh">My name is Samaksh</div> //HTML

   Expression in the above code defines true; It means the text inside div will render(print).

•   ng-for :- ngFor is used to loop through the dynamic lists in the DOM. Simply, it is used to build data presentation lists and tables in HTML DOM.            

var items =["Samaksh", "Akshay", "Raksha"];  //JS 

<div ng-for="let item of items">   // HTML
 <p >  {{item}} </p> 
</div>

The Above code will render all the elements of the array one by one.

• ng-switch :- We use ngSwitch to render the element according to a single condition followed by the different case statements.

<div ng-switch="Samaksh">
  <p  ng-switch-when="Akshay">Akshay</p>
  <p  ng-switch-when="Raksha">Raksha</p>
  <p  ng-switch-default>HRSD</p>
</div>

       The Above code will print "HRSD" because the value mentioned in ng-switch is "Samaksh",  Which is not found in any of the cases ofng-switch-when; therefore it will print the text inside the div havingng-switch-default
  

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Thanks for Reading 😊

Happy Learning 💻

If you find the above article helpful, Please give me a thumbs up on the post.

Regards,

Samaksh Wani