I'm creating a GitHub search app using the GitHub API in Angular. I want to restrict the number of items that can be stored in local storage. If the number of stored elements exceeds 5, the "Add to Favorite" button should either stop working or disappear. I attempted to achieve this with the following code snippet:
[ngStyle]="{'display': display.length > 5 && 'none' }"HTML:
<input type="text" [(ngModel)]="profile" (ngModelChange)="detectChange($event)" (keyup)="findProfile()" class="input">
<ng-template [ngIf]="profile !== '' && user">
<div class="profileContainer">
<div class="leftDetails">
<img class="userAvatar" [src]="user.avatar_url" alt="User Avatar">
<div>
<button class="button" [routerLink]="['', user.login.toLowerCase(), user.id ]">View Profile</button>
<button class="button" [ngStyle]="{'display': display.length > 5 && 'none' }" (click)="addLocal()">Add to Favorite</button>
</div>
</div>
<div class="rightDetails">
<p><span>Username: </span> {{user.login}}</p>
<p><span>Location:</span> {{user.location}}</p>
<p><span>E-mail:</span> {{user.email}}</p>
<p><span>Blog Link:</span> {{user.blog}}</p>
<p><span>Member Since:</span> {{user.created_at}}</p>
</div>
</div>
</ng-template>
<div *ngIf="closeDiv">
<div class="profileContainer" *ngFor="let item of display">
<div class="leftDetails">
<img class="userAvatar" [src]="item.avatar_url" alt="User Avatar">
<div>
<button class="button" [routerLink]="['', item.login.toLowerCase(), item.id ]">View Profile</button><br>
<button class="button" (click)="removeLocal(item.id,item.storageKey)">Remove Favorite</button>
</div>
</div>
<div class="rightDetails">
<p><span>Username:</span> {{item.login}}</p>
<p><span>Location:</span> {{item.location}}</p>
<p><span>E-Mail:</span> {{item.email}}</p>
<p><span>Blog Link:</span> {{item.blog}}</p>
<p><span>Member Since:</span> {{item.created_at}}</p>
</div>
</div>
</div>
TypeScript:
import { HttpService } from '../http.service';
import { ProfileComponent } from './profile/profile.component';
import { JsonPipe } from '@angular/common';
import { bindCallback } from 'rxjs';
import { FormArray } from '@angular/forms';
import { ArrayType } from '@angular/compiler';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements OnInit {
user: any;
profile: any;
display: any;
randomNumber: number;
randomString: string;
closeDiv: boolean = true;
isClicked: boolean = true;
constructor(private userData: HttpService) {}
ngOnInit() {
this.display = Object.values(localStorage).map((val: any) =>
JSON.parse(val)
);
console.log(this.display);
}
public findProfile() {
this.userData.updateProfile(this.profile);
this.userData.getUser().subscribe((result) =>
this.user = result;
});
}
public addLocal() {
this.randomNumber = Math.floor(Math.random() * 10000);
this.randomString = this.randomNumber.toString();
this.user.storageKey = this.randomString;
localStorage.setItem(this.user.storageKey, JSON.stringify(this.user));
this.display = Object.values(localStorage).map((val: any) =>
JSON.parse(val)
);
}
public removeLocal(id: any, key: string) {
for (let i = 0; i < this.display.length; i++) {
if (this.display[i].id === id) {
this.display.splice(i, 1);
localStorage.removeItem(key);
}
}
}
public detectChange(ev: any) {
ev.length > 0 ? (this.closeDiv = false) : (this.closeDiv = true);
}
}