Я создаю приложение поиска github с api github в Angular. Что мне нужно, так это когда я нажимаю кнопку «Добавить в избранное», кнопка «Добавить в избранное» должна исчезать и должна отображаться кнопка «Удалить из избранного». Я пытался сделать это с активными классами, но я новичок в Angular, у меня не получилось.
Изображение страницы
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>
ts:
@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);
}
}