'Tab Content of first tab also showing along with the second when clicked on Second Tab
So basically I have three tabs and all the three tabs has infinity scroll, so basically the first tab works fine but just when I switch to the other one and scroll there are two divs inside the div one shows the content of the first div and the other shows the content of the second div same with the third.
<div class="col-12">
<div class="row">
<div class="col-lg-6 col-md-12 col-12">
<div class="card tab-card shadow">
<div class="card-header mb-3 shadow-sm border-0 tab-card-header">
<ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="one-tab" data-toggle="tab" href="#one" role="tab" aria-controls="One" aria-selected="false">Friends</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="two-tab" data-toggle="tab" href="#two" role="tab" aria-controls="Two" aria-selected="false">Followers</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="three-tab" data-toggle="tab" href="#three" role="tab" aria-controls="Three" aria-selected="false">Following</a>
</li>
</ul>
</div>
<div class="tab-content" id="myTabContent">
<div class="tab-pane show active fade mt-3" [ngClass]="{'ajax-loader' : loading}" id="one" role="tabpanel" aria-labelledby="one-tab">
<ng-container *ngIf="!!friends.length else noRecordsFound">
<div class="search-results" #FriendsContainer
infiniteScroll
[infiniteScrollDistance]="2"
[infiniteScrollUpDistance]="0"
[infiniteScrollThrottle]="50"
(scrolled)="loadFriends(true)"
[scrollWindow]="false"
style="height: 325px;overflow: scroll; overflow-x: hidden;"
>
<div *ngFor="let item of friends,let i=index;" class="d-flex justify-content-between align-items-center mt-3 p-2 items rounded user-div">
<div id={{item.id}} class="d-flex flex-row justify-content-between align-items-center">
<img class="rounded" src="{{item.decoded_profile_img ? item.decoded_profile_img : defaultImage}}" width="40" height="40">
<div class="ml-2"><span class="user_name"><a [routerLink]="['/account/user/'+ item.id]">{{item.first_name + ' ' + item.last_name}}</a></span></div>
</div>
<div class="friends-dropdown dropleft">
<div class="cross-icon">
<i id="cross-{{item.id}}" class="fas fa-times-circle fa-2x cross"></i>
</div>
<!-- <div id="kebab-{{item.id}}" (click)="kebabOnClick(item.id)" class="kebab">
<div id="three-dots-{{item.id}}" class="three-dots">
<figure></figure>
<figure (click)="close(item.id)" id="middle-{{item.id}}" class="middle"></figure>
<figure></figure>
</div>
</div> -->
<button type="button kebab" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<figure></figure>
<figure id="middle-{{item.id}}" class="middle"></figure>
<figure></figure>
</button>
<ul class="dropdown-menu p-0" style="z-index: 1;" id="dropdown-{{item.id}}">
<li class="d-flex px-2">
<i class="fas fa-user-circle fa-lg"></i>
<a class="dropdown-item text-start" href="http://www.g.com">View Profile</a>
</li>
<li class="d-flex px-2" *ngIf="!item.is_following" (click)="followUser(item);">
<i class="fas fa-eye fa-lg"></i>
<a class="dropdown-item text-start">Follow</a>
</li>
<li class="d-flex px-2">
<i class="fas fa-comment-dots fa-lg"></i>
<a class="dropdown-item text-start" [routerLink]="['/messages/user/'+ item.id]">Message</a>
</li>
<li class="d-flex px-2" *ngIf="item.is_following" (click)="followUser(item);">
<i class="fas fa-eye-slash fa-lg"></i>
<a class="dropdown-item text-start">Unfollow</a>
</li>
<li class="d-flex px-2" (click)="removeFriend(item)">
<i class="fas fa-user-slash fa-lg"></i>
<a class="dropdown-item text-start">Remove Friend</a>
</li>
<li class="d-flex px-2" (click)="blockUser(item)">
<i class="fas fa-ban fa-lg"></i>
<a class="dropdown-item text-start">Block</a>
</li>
</ul>
</div>
</div>
</div>
</ng-container>
</div>
<div class="tab-pane fade mt-3" id="two" role="tabpanel" aria-labelledby="two-tab">
<ng-container *ngIf="!!followers.length; else noRecordsFound">
<div class="search-results" #FollowersContainer
infiniteScroll
[infiniteScrollDistance]="2"
[infiniteScrollUpDistance]="0"
[infiniteScrollThrottle]="50"
(scrolled)="loadFollowedUsers(true)"
[scrollWindow]="false"
style="height: 325px;overflow: scroll; overflow-x: hidden;"
>
<div *ngFor="let item of followers,let i=index;" class="d-flex justify-content-between align-items-center mt-3 p-2 items rounded">
<div class="d-flex flex-row justify-content-between align-items-center">
<img class="rounded" src="{{item.decoded_profile_img ? item.decoded_profile_img : defaultImage}}" width="40">
<div class="ml-2"><span class="user_name"><a [routerLink]="['/account/user/'+ item.id]">{{item.first_name + ' ' + item.last_name}}</a></span></div>
</div>
<div class="friends-dropdown dropleft">
<!-- <div class="cross-icon">
<i (click) = "close('followers-'+item.id);" id="cross-followers-{{item.id}}" class="fas fa-times-circle fa-2x cross"></i>
</div>
<div id="kebab-followers-{{item.id}}" (click)="kebabOnClick('followers-'+item.id)" class="kebab">
<div id="three-dots-followers-{{item.id}}" class="three-dots">
<figure></figure>
<figure (click)="close(item.id)" id="middle-{{item.id}}" class="middle"></figure>
<figure></figure>
</div>
</div> -->
<button type="button kebab" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<figure></figure>
<figure id="middle-{{item.id}}" class="middle"></figure>
<figure></figure>
</button>
<ul class="dropdown-menu p-0" id="dropdown-followers-{{item.id}}">
<li class="d-flex px-2">
<i class="fas fa-user-circle fa-lg"></i>
<a class="dropdown-item text-start" href="http://www.g.com">View Profile</a>
</li>
<li class="d-flex px-2" *ngIf="!item.is_friend">
<i class="fas fa-user-plus fa-lg"></i>
<a class="dropdown-item text-start" href="http://www.g.com">Add Friend</a>
</li>
<li class="d-flex px-2" *ngIf="!item.is_following">
<i class="fas fa-eye fa-lg"></i>
<a class="dropdown-item text-start" href="http://www.g.com">Follow</a>
</li>
<li class="d-flex px-2" *ngIf="item.is_following">
<i class="fas fa-eye-slash fa-lg"></i>
<a class="dropdown-item text-start" href="http://www.g.com">Unfollow</a>
</li>
<li class="d-flex px-2">
<i class="fas fa-comment-dots fa-lg"></i>
<a class="dropdown-item text-start" href="http://www.g.com">Message</a>
</li>
<li class="d-flex px-2" *ngIf="item.is_friend == 'active'">
<i class="fas fa-user-slash fa-lg"></i>
<a class="dropdown-item text-start" href="http://www.g.com">Remove Friend</a>
</li>
<li class="d-flex px-2" *ngIf="item.is_friend == 'requesting'">
<i class="fas fa-user-slash fa-lg"></i>
<a class="dropdown-item text-start" href="http://www.g.com">Accept Request</a>
</li>
<li class="d-flex px-2" *ngIf="item.is_friend == 'pending'">
<i class="fas fa-user-slash fa-lg"></i>
<a class="dropdown-item text-start" href="http://www.g.com">Cancel Request</a>
</li>
<li class="d-flex px-2">
<i class="fas fa-ban fa-lg"></i>
<a class="dropdown-item text-start" href="http://www.g.com">Block</a>
</li>
</ul>
</div>
</div>
</div>
</ng-container>
</div>
<div class="tab-pane fade pt-3" id="three" role="tabpanel" aria-labelledby="three-tab">
<ng-container *ngIf="!!following.length; else noRecordsFound">
<div class="search-results" #FollowingContainer
infiniteScroll
[infiniteScrollDistance]="2"
[infiniteScrollUpDistance]="0"
[infiniteScrollThrottle]="50"
(scrolled)="loadFollowingUsers(true)"
[scrollWindow]="false"
style="height: 325px;overflow: scroll; overflow-x: hidden;"
>
<div *ngFor="let item of following,let i=index;" class="d-flex justify-content-between align-items-center mt-3 p-2 items rounded">
<div class="d-flex flex-row justify-content-between align-items-center">
<img class="rounded" src="{{item.decoded_profile_img ? item.decoded_profile_img : defaultImage}}" width="40">
<div class="ml-2"><span class="user_name"><a [routerLink]="['/account/user/'+ item.id]">{{item.first_name + ' ' + item.last_name}}</a></span></div>
</div>
<div class="friends-dropdown dropleft">
<!-- <div class="cross-icon">
<i (click) = "close(item.id);" id="cross-{{item.id}}" class="fas fa-times-circle fa-2x cross"></i>
</div>
<div id="kebab-{{item.id}}" (click)="kebabOnClick(item.id)" class="kebab">
<div id="three-dots-{{item.id}}" class="three-dots">
<figure></figure>
<figure (click)="close(item.id)" id="middle-{{item.id}}" class="middle"></figure>
<figure></figure>
</div>
</div> -->
<button type="button kebab" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<figure></figure>
<figure id="middle-{{item.id}}" class="middle"></figure>
<figure></figure>
</button>
<ul class="dropdown-menu p-0" id="dropdown-followers-{{item.id}}">
<li class="d-flex px-2">
<i class="fas fa-user-circle fa-lg"></i>
<a class="dropdown-item text-start" href="http://www.g.com">View Profile</a>
</li>
<li class="d-flex px-2">
<i class="fas fa-user-plus fa-lg"></i>
<a class="dropdown-item text-start" href="http://www.g.com">Add Friend</a>
</li>
<li class="d-flex px-2">
<i class="fas fa-eye fa-lg"></i>
<a class="dropdown-item text-start" href="http://www.g.com">Follow</a>
</li>
<li class="d-flex px-2">
<i class="fas fa-comment-dots fa-lg"></i>
<a class="dropdown-item text-start" href="http://www.g.com">Message</a>
</li>
<li class="d-flex px-2">
<i class="fas fa-eye-slash fa-lg"></i>
<a class="dropdown-item text-start" href="http://www.g.com">Unfollow</a>
</li>
<li class="d-flex px-2">
<i class="fas fa-user-slash fa-lg"></i>
<a class="dropdown-item text-start" href="http://www.g.com">Remove Friend</a>
</li>
<li class="d-flex px-2">
<i class="fas fa-ban fa-lg"></i>
<a class="dropdown-item text-start" href="http://www.g.com">Block</a>
</li>
</ul>
</div>
</div>
</div>
</ng-container>
</div>
</div>
<div class="dots text-center mb-3"><i class="fas fa-ellipsis-h" aria-hidden="true"></i> </div>
</div>
</div>```
This is created in angular.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|