What is the best way to display user data exclusively in Angular?

How can I ensure that users only have access to their own information rather than the entire database?

I attempted to use an if-else statement to filter out the data I need, as shown in the example below, but it was unsuccessful.

custom-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>

custom-history.component.ts

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

@Component({
  selector: 'app-custom-history',
  templateUrl: './custom-history.component.html',
  styleUrls: ['./custom-history.component.css']
})
export class CustomHistoryComponent 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;
      }
    });
  }
}

Answer №1

It is recommended to handle validation on the angular side based on your code logic. Avoid checking validation in this section:

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

Instead, move the validation process 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 9's localization feature is not functioning properly when using the configuration flag --configuration=de

When I utilize $localize from "@angular/localize/" with "ng serve --configuration=de", the result that I obtain is shown in the following image: https://i.sstatic.net/oxusb.png Everything functions perfectly when executing the project with just "ng serve ...

What is the process for declaring a set in typescript?

In the documentation on basic types for Typescript, it explains using Arrays as a primitive type I am interested in the syntax: const numbers: string[] = [] How can I achieve the same with a set? ...

Fulfill the promise to retrieve the value contained within

Is there a way to use TypeScript to call the Wikipedia API for retrieving a random page title and save it in a variable for later use? I am struggling with resolving promises as I keep getting ZoneAwarePromise returned. I'm new to both promises and Ty ...

"iOS users have reported that notifications from Firebase have mysteriously ceased to

Yesterday evening, I was experimenting with Push Notifications from Firebase on my iOS application and everything was functioning correctly. I successfully sent a notification from a Cloud Function to a specific FCM token. However, this morning, notificat ...

Angular 2 Issue: @Input() Directive Not Recognized - Unresolved Reference Error

I am a beginner trying to grasp Angular2 concepts from ng-book 2(v49). Below is the code snippet from article.componenets.ts file: import { Component, OnInit } from '@angular/core'; import { Article } from './article.model'; @Componen ...

Determination of the input parameters

Currently, I am developing an Angular application that includes a matInput field for user input. The issue I am encountering is that when the user enters a positive or negative value in the field (e.g. +5 or -5), the final output does not reflect the inten ...

Issue with maintaining variable state in Angular 7 service component

I currently have 2 components and a single service file in my Angular project, which consist of a login component and a dashboard component. The issue arises when I try to access the user data from the service file. In the login component, the user data i ...

Returning a 'never' type from a function in React using Typescript

Basically, I have a function that initiates the OAuth flow (redirecting to Google OAuth login page, for example): async function signIn() { // start OAuth flow } And let's say I want to use it in a useEffect hook like this: ... useEffect(() => { ...

Using CamanJs in conjunction with Angular 6

Struggling to integrate camanjs with Angular 6? Wondering how to add the JavaScript library and use it within an Angular project when there are no types available on npm? Here are the steps I followed: First, install Caman using npm. Next, add it to ...

Can you please clarify the purpose and functionality of @HostBinding(hostPropertyName)?

The @HostBinding() decorator requires an argument called 'hostPropertyName'. Are you familiar with this host and how can we discover its available properties? ...

Issue with second button in Angular Onclick() not been resolved

I'm experiencing an issue with the onClick() methods in my code. There are two onClick() methods present on the UI, but when I click on the second one, it does not call the method while the first one does. I am struggling to figure out why this is hap ...

What is preventing me from loading a module using a variable containing a string?

This code snippet demonstrates how the module can be successfully loaded using import('test'), but not with the second example. These lines of code are executed within an Angular 9 application utilizing the default Webpack configuration. var tes ...

Filter an array of objects in Typescript by using another array of strings

I'm having trouble with my TypeScript filter function. Here is an array of objects: [ { "id": 12345, "title": "Some title", "complexity": [ { "slug": "1", // This is my search term "name": "easy" }, { ...

Angular - Error: Unable to access properties of an undefined object (reading 'showSpinner')

When attempting to run the following code block, I encountered the following error message: core.mjs:6485 ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'showSpinner') async ShowData() { if(this. ...

The parameter type '(req: Request, res: Response, next: NextFunction) => void' does not match the type of 'Application<Record<string, any>>'

I'm currently working on an Express project that utilizes TypeScript. I have set up controllers, routers, and implemented a method that encapsulates my controller logic within an error handler. While working in my router.ts file, I encountered an err ...

Encountering an issue with d3 Angular 2 pie chart related to d3.arc data

I encountered a problem with my code: 'PieArcDatum' is not assignable to parameter of type 'DefaultArcObject.' at this specific line Argument of type return "translate(" + labelArc.centroid(d) + ")";. Could someone please assist me in ...

Is it possible to control Firestore's data using an Angular service?

I am currently developing a basic example (Tour of Heroes) in Angular.io utilizing Firestore. In order to enhance readability and organization, the sections related to Firestore were segregated within the service and then referred in each component. Howev ...

Utilizing TypeScript: Importing a typed module within a d.ts file (from an npm package)

I am currently working on integrating a definition file into an npm package that has dependencies on React. The specific library in question can be found at https://github.com/eiriklv/react-masonry-component. In my TypeScript project, I have successfully ...

Most effective method for filling in nested information

Let me start by admitting that I've delved deep into this issue, possibly missing a simpler solution along the way. If there is an obvious solution staring me in the face, I apologize! Here's the problem at hand: I'm working with a set of ...

Creating a Higher Order Component with TypeScript using React's useContext API

Looking to convert this .js code snippet into Typescript. import React from 'react'; const FirebaseContext = React.createContext(null) export const withFirebase = Component => props => ( <FirebaseContext.Consumer> {fire ...