CODEWITHSUNDEEP
javascriptangulartypescript
Dogukan Aktas
Dogukan Aktas

Reputation: 113

Toggling buttons in Angular

I'm building github search app with github api in Angular. What I need is when I click the Add to Favorite button, Add to Favorite button should be gone and Remove Favorite Button should be displayed. I tried to do this with active classes but I'm new to Angular, I could not do it.

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>

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);
  }

}

Upvotes: 0

Views: 185

Answers (2)

Pardeep Jain
Pardeep Jain

Reputation: 86740

You can simply toggle the buttons conditionally using *ngIf directive in Angular.

<button *ngIf='favoriteActive' class="button" (click)="*ngIf='favoriteActive' = false; localStorage()" >Add to Favorite</button>
<button *ngIf='!favoriteActive' class="button" (click)="favoriteActive' = true; removeLocal()" >Remove Favorite</button>

Tip: Don't use method name as localStorage as it might be conflicting with the default localStorage in the JS.

Upvotes: 1

D.Aktas
D.Aktas

Reputation: 38

This will make the toggle action for the buttons.

<button class="button" (click)="isClicked = !isClicked" [ngClass]="{'active': !isClicked}" (click)="localStorage()" >Add to Favorite</button>
<button class="button" [ngClass]="{'active': isClicked (click)="removeLocal(user.id,user.storageKey)" (click)="isClicked = !isClicked" >Remove Favorite</button>

Upvotes: 0

Related Questions