CODEWITHSUNDEEP
angulartypescript
KUROYUKI
KUROYUKI

Reputation: 123

how do I only show the user data in angular

What can I do to make it so that user can only see their own information rather than the whole database?

I have tried to use an if else statement to get the data I want like in the example below but it doesn't work.

history.component.html

<div class="container">
  <div class="row" *ngFor="let histories of history">
    <div class="card card-block">
      <h4 class="card-title">{{ histories.email }}</h4>
      <p class="card-text">{{histories.amount}}</p>
    </div>
  </div>
</div>

history.component.ts

import { Component, OnInit } from '@angular/core';
import { PostsService } from '../posts.service';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-history',
  templateUrl: './history.component.html',
  styleUrls: ['./history.component.css']
})
export class HistoryComponent implements OnInit {
  history: any;
  histories: any;
  public userEmail: string;

  constructor(private postsService: PostsService, private auth: AuthService) { }

  ngOnInit() {
    this.auth.currentEmail.subscribe(email => this.userEmail = email);

    this.postsService.getAllHistory().subscribe(history => {
      if(history.email == this.userEmail){
        this.history = history;
      }
    });
  }
}

Upvotes: 1

Views: 961

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222672

Yes you should do it on the angular side, according to your code, you should not check the validation here 

  this.postsService.getAllHistory().subscribe(history => {    
 //remove this line  if(history.email==this.userEmail){
         this.history = history;
      }
  });

instead do it here

<div class="row" *ngFor="let histories of history">
      <div *ngIf="histories.email === userEmail" class="card card-block">
        <h4 class="card-title">{{ histories.email }}</h4>
        <p class="card-text">{{histories.amount}}</p>
      </div>
</div>

Upvotes: 2

Related Questions