Angular 9 show data change [instantly] without reload

Question

I want to increase my like arrays length when clicking on the like button and decrease the like length from the database. Here is my code in brief like.component.ts

  @Input('isLiked') isLiked: boolean;
  likes: Like[] = [];
  localUser;

  constructor(
    private postService: PostService,
    private postActivity: PostActivityService
  ) {}

  ngOnInit(): void {
    this.localUser = this.postService.getLocalUSer();
    
  }


  like(id) {
    this.postActivity.likePost(id).subscribe((data) => {
      this.likes = data.likes;
      this.isLiked = this.likes.includes(this.localUser._id)
      console.log('liked data', this.likes,this.isLiked);
    });
  }

  disLike(id) {
    this.postActivity.disLike(id).subscribe((data) => {
      this.likes = data.likes;
      this.isLiked = this.likes.includes(this.localUser._id)
      console.log('liked data', this.likes,this.isLiked);
    });
  }

like.component.html

<button  (click)="isLiked ? disLike(p._id) : like(p._id)" mat-button>
  <mat-icon aria-hidden="false"  [color]="isLiked ? 'warn':'primary'" >{{ isLiked ? 'favorite' : 'favorite_border'}}</mat-icon>
  {{p.likes.length}}

  <ng-container *ngIf="p.likes.length===0 || p.likes.length===1; else elseTemplate">
    like
  </ng-container>
  <ng-template #elseTemplate>
    likes
  </ng-template>
</button>

card.component.html

<app-like [p]="p" [isLiked]="p.likes.includes(signUser._id)"></app-like>

post-activity-service

 likePost(id) {
    return this.http.put<Mypost>(this.url + '/like', JSON.stringify({ postId: id }), {
      headers: this.headers,
    });
  }


  disLike(id) {
    return this.http.put<Mypost>(this.url + '/unlike', JSON.stringify({ postId: id }), {
      headers: this.headers,
    });
  }

like length update

https://i.sstatic.net/n2DnQ.gif

Answer 1

Try this, If you want to update view while updating the array.

like(id) {
        this.postActivity.likePost(id).subscribe((data) => {
            this.likes = [...this.likes, data.likes];
            this.isLiked = this.likes.includes(this.localUser._id);
            console.log('liked data', this.likes,this.isLiked);
        });
    }
    
    disLike(id) {
        this.postActivity.disLike(id).subscribe((data) => {
            this.likes = [...this.likes, data.likes];
            this.isLiked = this.likes.includes(this.localUser._id);
            console.log('liked data', this.likes,this.isLiked);
        });
    }

Or, Here you are displaying the wrong value, simply display the value from the current context. i.e {{likes.length}} not {{p.likes.length}}

<button  (click)="isLiked ? disLike(p._id) : like(p._id)" mat-button>
  <mat-icon aria-hidden="false"  [color]="isLiked ? 'warn':'primary'" >{{ isLiked ? 'favorite' : 'favorite_border'}}</mat-icon>
  {{likes.length}}

  <ng-container *ngIf="p.likes.length===0 || p.likes.length===1; else elseTemplate">
    like
  </ng-container>
  <ng-template #elseTemplate>
    likes
  </ng-template>
</button>