Top method for discovering a corresponding value within an array by comparing it with another collection of values through Angular

Received the array below from a service which contains roles of a logged in user: roles = ['MM_VIEW', EM_VIEW]

I have a specific requirement where I need to check if the user has any of these roles - MM_VIEW, MM_EDIT, MM_DELETE. Based on this, I need to execute certain logic.

I am considering whether to create an enum or use direct OR conditions like the one shown below:

    if (user.roles.includes('MM_VIEW') || user.roles.includes('MM_EDIT') || user.roles.includes('MM_DELETE')) {
      this.appImgPIIError.emit(true);
    } else {
      this.appImgPIIError.emit(false);
    }

While this solution works, I am not entirely comfortable with hard coding values in my component. Any suggestions would be greatly appreciated. Thank you.

arraysangulartypescript

Answer №1

To achieve this, you can utilize the some method as shown below

const roles = ['MM_VIEW', 'EM_VIEW'];
const types = ['MM_VIEW', 'MM_EDIT', 'MM_DELETE'];

if( roles.some(r=>types.includes(r)) ){
    event.emit(true);
} else {
    event.emit(false);
}

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

Unable to create an equilateral triangle using a two-dimensional array

As I prepare for my upcoming interview, one of the tasks is to create an equilateral triangle using a 7x7 2D array. I attempted the following code but I am unsure about how to modify it in order to successfully create an equilateral triangle. package ...

javaarraysmultidimensional-array

Troubleshooting error when integrating Power BI with Angular: Module 'powerbi-client-angular' not found or its type declarations

Encountered an error at: import { PowerBIEmbedModule } from "powerbi-client-angular"; error: Cannot find module 'powerbi-client-angular' or its corresponding type declarations `import { NgModule } from '@angular/core';import ...

angularnpmpowerbipowerbi-embeddedpower-bi-report-server

Unable to bind input data with interface in Ionic 4 – issues persist

I am working with an interface in Ionic that looks like this: // mydata.model.ts export interface Mydata{ id: string; name: string; date: string } To add new data to the backend, I am binding my data within my component using <ion-input> a ...

angularionic-frameworkionic4ngmodel

Issue with Angular 5: Unable to update template within Observable sequence

When I have a component and need to display a loader Here is the component code: ngOnInit() { this.route.params .do(x => this.contentLoading = true) .switchMap(x => this.getClientSearchResults()) .subscribe(x => { ...

javascriptangularangular5observable

Is there a way to drop a pin on the Google Maps app?

Is there a way to pinpoint the specific location on Google Maps? <google-map id="map-container" width="100%" height="100%" class="maps"></google-map> ...

htmlcssangulartypescript

Steps to resolve the following issue: "When evaluating -(num[i] + num[j]) in [lambda index: del num[index] for index in sorted(indexes, reverse=True)]:"1. Check the values of the

How can I resolve this line error? num = [-1,0,1,2,-1,-4] indexes = [i,j] if -(num[i] + num[j]) in [lambda index: del num[index] for index in sorted(indexes, reverse=True)]: return something I am trying to ...

pythonarrayslambda

In order for the argument to be valid, it is

Transitioning to Typescript has brought me immense joy for various reasons. While exploring its benefits, I encountered a challenge related to verifying if an argument passed to a function extends another class. Here is an example scenario: class Foo { ...

typescript

Leveraging Angular universal for server-side rendering involves utilizing navigator (whether it is the window object or other browser

According to the documentation: The server-side page is unable to reference browser-only native objects like window, document, navigator, or location. However, with conditional logic, you can work around this limitation if these objects are not required ...

angularangular-universalserverside-javascriptserver-side-rendering

"Encountering a glitch in the Typescript/Node API where Express routes

Encountering a peculiar issue here - when attempting to import my router from an external file and add it as a route, I keep getting this unusual error where the string appears to be enclosed in double quotes. https://i.sstatic.net/nm9Wn.png ...

node.jsexpresstypescriptvisual-studio-code

Angular service from an external package is experiencing issues with dependency injection where the HttpClient is returning

Imagine you are working with Angular and have the following custom libraries: The first library is a base service library: // base.service.ts import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core&apos ...

angulartypescripthttpclient

A universal approach for rendering a React component relies on the values of two specific props

Looking for a way to make my component more flexible by creating a generic method. This component currently takes two props - function and node (or string with label text) - and renders an icon with a label based on these props. I plan to add more button ...

javascriptarraysreactjsecmascript-6

Guide on correctly setting up and utilizing refs for a themed functional component in TypeScript and React Native

Primary Objective: I aim to have two text inputs where pressing return on the first one will shift the focus to the next input. Let's begin with the configuration (using TypeScript). I have a customized text input with specific color settings, and I ...

typescriptreact-nativeuse-refreact-forwardref

Switching Workspaces in Visual Studio

Is it possible to switch from an existing project to a new one in Visual Studio using NPM? ...

angularvisual-studionpm

HttpClient is not suitable for backend queries when working with Angular, unlike Http

Hey there, I'm diving into Angular and trying my hand at a REST API for the first time, so bear with me if something slips past me. In this scenario, I have a Period object in Typescript and in C#, here they are: Period TS: export class Period { ...

c#angulartypescripthttpangular-httpclient

When accessing a method exposed in Angular2 from an external application, the binding changes are lost

In my code, I have a method that is made public and accessible through the window object. This method interacts with a Component and updates a variable in the template. However, even after changing the value of the variable, the *ngIf() directive does not ...

javascriptangulartypescriptobservableangular2-changedetection

The return type of a getter is `any` if the object contains a method and is processed by a generic function

I am facing an issue with my code where the getter's return type is set to any, even though the actual return type should be clear. There are certain additional functions triggering this behavior: // This is necessary for reproduction const wrapperFun ...

typescript

Efficient method to access two arrays simultaneously and combine them into an associative array in JavaScript

When using Ajax to return a table, you have the option of separating column names and row values. Here are two ways to do it: let columns = ["col1", "col2", "col3"]; let rows = [ ["row 1 col 1", "row 1 col 2", "row 1 col 3"] , ["row 2 col 1", "r ...

javascriptarraystypescriptpropertiestypescript2.0

Encountering TypeScript error 2345 when attempting to redefine a method on an Object Property

This question is related to Object Property method and having good inference of the function in TypeScript Fortunately, the code provided by @jcalz is working fine; const P = <T,>(x: T) => ({ "foo": <U,>(R: (x: T) => U) => ...

typescript

How to Hide Parent Items in Angular 2 Using *ngFor

I am dealing with a data structure where each parent has multiple child items. I am trying to hide duplicate parent items, but accidentally ended up hiding all duplicated records instead. I followed a tutorial, but now I need help fixing this issue. I only ...

angulartypescriptdatatablengfor

Managing the re-rendering in React

I am encountering a situation similar to the one found in the sandbox example. https://codesandbox.io/s/react-typescript-fs0em My goal is to have Table.tsx act as the base component, with the App component serving as a wrapper. The JSX is being returned ...

javascriptreactjstypescriptredux