Show initials of a name when a certain angular condition is met

I have a list of names stored in the variable

Names : "Amit Singh, Kumar Anand"
Names : "Ashish Singh"

The names can be singular or multiple, separated by commas like "James, Anand, xyz,..."

During a for loop iteration

<div *ngFor="let user of Info">
{{ (user.Names != null && user.Names.length>0) ?
                                        (user.Names |
                                        slice:0:1)
                                        : '' }}
</div>

The current output is A, but I would like to see AS instead. If there are multiple names with a comma, I want to display M replacing the first and last name.

Any suggestions? Thank you!

javascriptangulartypescript

Answer №1

If you prefer to keep it concise, you can achieve the desired result in a single line of code:

user.Names.split(",").length === 1 ? user.Names.trim().split(" ").map(x => x[0]).reduce((acc, curr) => acc + curr) : 'M'

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

React file viewer failing to display content via Firebase storage URLs

This code snippet is designed to display PDF files uploaded to Firebase storage using React. Here is a sample of the code: import ReactDOM from "react-dom"; import FileViewer from "react-file-viewer"; import "./styles.css"; ...

javascriptreactjsfirebasegoogle-cloud-firestorefirebase-storage

Exploring the integration of an Angular 4 application with Visual Studio 2017 using dot net core. Techniques for accessing configuration keys from appsetting.json in a TypeScript

I'm currently working on an Angular 4 application using Visual Studio 2017 with .NET Core. I need to figure out how to access configuration keys from appsetting.json in my TypeScript file. I know how to do it in the startup.cs file, but I'm strug ...

jsonangulartypescript

When a function inside React uses this.props, it won't trigger the corresponding function

I am currently developing a Checklist using React and MaterialUI that consists of two components. One component is responsible for managing the data, while the other component allows for editing the data. However, I have encountered an issue where the func ...

javascriptreactjsreact-routermaterial-ui

Confirming that the NGRX Dictionary value is set

After upgrading from Angular 7.1.4 to 8.2.0 and Typescript from 3.1.6 to 3.5.3, I encountered an issue with identification of array items. Prior to the upgrade, TypeScript correctly recognized that the array item was not undefined. However, post-upgrade, ...

angulartypescriptngrxrxjs6ngrx-entity

Is there a way for me to streamline the process of logging in using either Google or Facebook?

Is there a way for me to automate the scenario if I'm unable to locate the element using Appium Uiautomator? https://i.stack.imgur.com/Rjji4.png ...

javascriptandroidappium

Typescript struggling to load the hefty json file

Currently, I am attempting to load a JSON file within my program. Here's the code snippet that I have used: seed.d.ts: declare module "*.json" { const value: any; export default value; } dataset.ts: import * as data from "./my.json" ...

javascriptnode.jstypescript

Utilizing Jquery to create a carousel with looping functionality for flowing text

I am currently facing an issue with a carousel that contains multiple images and text. In order to make the text responsive, I have implemented a script called FlowText. The script works perfectly on the initial carousel image (the active one), but as soon ...

javascriptjquerycssasp.net-mvc-4bootstrap-4

Customize Embed with Angular Directive

I'm currently attempting to customize an embedded object using Angular Directive, but I am running into difficulties getting the directive to function correctly. Here is the code for the object: <object width="250" height="40"> <param n ...

javascriptangularjsembedfirebase

Troubles encountered in retrieving values from various <select>/<option> elements

Having some trouble with the code below. I am attempting to retrieve the values of the selected options from my layout_select2. Currently, when I select 'multi_select' and then an option from 'layout_select2', I end up with the first v ...

javascriptjqueryhtmldrop-down-menu

show information from json onto an html page with the help of jquery

I'm looking to showcase buttons from a JSON file within a simple block. Here's the JSON data for movies: { "movies": [ { "title": "Mena", "movieid": "1", ...

javascriptjqueryhtmljson

incongruity discovered during string conversion in HmacSHA256 within Ionic framework

I am facing an issue while trying to create a token in IONIC using the CryptoJS library. The signature generated by the method is different from what I expect. The expected signature is lLJuDJVb4DThZq/yP4fgYOk/14d3piOvlSuWEI/E7po= but the method provides m ...

typescriptionic-framework

Utilizing numerous script elements for three.js library

Today, I ventured into the world of three.js for the first time, along with exploring html and js in general. While experimenting with some example code, I encountered an issue. It seems that importing the three.js file from the script tag in my Main.js ...

javascripthtmlnode.jsthree.js

What is the process for creating a clickable file upload in Angular?

Currently, I am utilizing the instructions found in this guide to implement a file upload feature in my project. The code provided works perfectly: <input type="file" class="file-input (change)="onFileSelected($event)" #fileUplo ...

javascripthtmlangulartypescript

Explore the intricacies of RxJS catchError

I am a beginner in RxJS and I am struggling to understand how the parameters are passed in this code snippet: import { catchError, map, Observable, of } from 'rxjs'; let obs$ = of(1,2,3,4,5); obs$.pipe( map(n => { if (n === 4) { ...

typescriptrxjs

Local variables in AngularJS across multiple Angular applications

Looking for a method to retain a local variable not affected by path or angular app changes. Attempted using $window.localStorage.set and get item, rootScope, and $window.variable with no success. ...

javascriptangularjsangularjs-scopeangular-routing

Displaying Product Attribute and Category Names in Woocommerce Title

After reading the answer provided in this thread (Woocommerce: How to show Product Attribute name on title when in a category page and "filtering" products via '?pa_attribute=' on address bar), I am interested in displaying both the categ ...

javascriptphpwoocommerce

When the button is clicked, dynamically fetch data from a MySQL database using PHP without the need to refresh

I have a .php page where I am displaying a table from my MySQL database using PHP based on a cookie value. On this same page, I have implemented a feature that allows me to change the cookie data without having to reload the entire page by simply clicking ...

javascriptphpjquerymysqlajax

Exploring the TypeScript compiler API to read and make updates to objects is an interesting

I'm delving into the world of the typescript compiler API and it seems like there's something I am overlooking. I am trying to find a way to update a specific object in a .ts file using the compiler API. Current file - some-constant.ts export co ...

javascripttypescriptcompiler-constructiontypescript-compiler-api

Retrieve the observable value and store it in a variable within my Angular 13 component

Incorporating Angular 13, my service contains the following observable: private _user = new BehaviorSubject<ApplicationUser | null>(null); user$ = this._user.asObservable(); The ApplicationUser model is defined as: export interface ...

javascriptangulartypescript

Copying data from a table to another in Angular 2 with the help of Angular Material

Incorporated a simple table in angular 2 using angular material. I have two mat-tables where selected rows from the first table are transferred to the second table by clicking Move To Table 2, and vice versa when clicking Move To Table 1. When selecting a ...

angulartypescriptangular-material