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