Fixing Page Reload Issues In Angular Project

on

Introduction

Suppose we have a page where we are showing the employee list-page. In this component, we are having a button to Add new Employee which will go to the employee-create component page. We are showing a list of employees. If we click on any particular employee, it will go to the employee detail page. 

<div class="row">
   <div class="col-md-12">
      <button class="btn btn-primary">Add new employee</button>
   </div>
</div>
<div class="row">
   <div class="col-md-12">
      <div *ngFor="let emp of employees">
         <a href="#" class="emp-list-items">
            <div class="float-left">
               <h3>{{emp.name}}</h3>
               <p>{{emp.id}}</p>
            </div>
            <div class="float-right">
               <h3>{{emp.address}}</h3>
               <p>{{emp.phone}}</p>
            </div>
         </a>
      </div>
   </div>
</div>
Now when we click on individual employees, the page gets reload every time. This is happening because of the href attribute in the <a> tag. The request is going to the server when we are clicking individual items. This is the main reason behind the reloading of the page. So we will remove the href="#" from our code. 

<div class="row">
   <div class="col-md-12">
      <button class="btn btn-primary">Add new employee</button>
   </div>
</div>
<div class="row">
   <div class="col-md-12">
      <div *ngFor="let emp of employees">
         <a class="emp-list-items">
            <div class="float-left">
               <h3>{{emp.name}}</h3>
               <p>{{emp.id}}</p>
            </div>
            <div class="float-right">
               <h3>{{emp.address}}</h3>
               <p>{{emp.phone}}</p>
            </div>
         </a>
      </div>
   </div>
</div>
So we can fix page reloading issues in our Angular project by removing the href="#" attribute from respective <a> tags. Remove ref attribute and fix page reload issue on clicking. When we remove the ref attribute from <a> tag, the pointer will not show up now. So we should explicitly add cursor: pointer in our inline CSS. 

<div class="row">
   <div class="col-md-12">
      <button class="btn btn-primary">Add new employee</button>
   </div>
</div>
<div class="row">
   <div class="col-md-12">
      <div *ngFor="let emp of employees">
         <a style="cursor: pointer;" class="emp-list-items">
            <div class="float-left">
               <h3>{{emp.name}}</h3>
               <p>{{emp.id}}</p>
            </div>
            <div class="float-right">
               <h3>{{emp.address}}</h3>
               <p>{{emp.phone}}</p>
            </div>
         </a>
      </div>
   </div>
</div>

Comments

Post a Comment