I am currently working on a Github search app using the Github API in Angular. My goal is to make it so that when the user clicks the "Add to Favorite" button, the button disappears and the "Remove Favorite" button is displayed instead. I attempted to achieve this using active classes but since I am new to Angular, I was not successful.
Click here to view an image of the page
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" (click)="localStorage()" >Add to Favorite</button>
<!-- <button class="button" (click)="removeLocal()" >Remove 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>
</div>
<router-outlet></router-outlet>
TypeScript:
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements OnInit {
user: any;
profile: any;
display: any;
local: any;
randomNumber: any;
randomString: any;
idString: any;
keys: any;
closeDiv: boolean = true;
isActive : 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 localStorage() {
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));
console.log(this.display);
console.log(this.user);
console.log(this.user.storageKey);
}
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);
}
}
console.log(key);
}
public detectChange(ev: any) {
ev.length > 0 ? (this.closeDiv = false) : (this.closeDiv = true);
}
}