How to extract the first initials from a full name using Angular TypeScript and *ngFor

Question

How to extract the first initials from a full name using Angular TypeScript and *ngFor

I am new to Angular and still learning about its functionalities. Currently, I am developing an Angular app where I need to display a list of people. In case there is no picture available for a person, I want to show the first letters of their first name and last name as 'DP'. The code snippet I am working on looks like this:

<div class="people" *ngFor="let user of users">
    <div class="s-profile-icon">
        <img src={{user.picture}} alt="Profile" />
    </div>
    <div class="s-name">
        {{user.full_name}}
    </div>
</div>

I know that I can use *ngIf directive on user.picture to check if the picture is empty. However, my challenge lies in getting the first letters of the user's name. For instance, if the user.full_name is 'Mary Johnson' and there is no picture available, then instead of displaying an image, it should show 'MJ'. I have the circle design ready to display these letters, but I'm unsure how to extract the first letters within the loop. If anyone has insights on how to achieve this, I would greatly appreciate your help.

angular typescript

Answer 1

Answer №1

To achieve a shortened name display, you have two options. You can either create a custom method in your component or develop a custom Angular pipe.

Method for obtaining a short name:

getShortName(fullName) { 
  return fullName.split(' ').map(n => n[0]).join('');
}

Template usage:

<div class="people" *ngFor="let user of users">
    <div class="s-profile-icon">
        <img src={{user.picture}} alt="{{getShortName(user.full_name)}}" />
    </div>
    <div class="s-name">
        {{getShortName(user.full_name)}}
    </div>
</div>

Update 🔥

The approach above is considered bad practice as the method runs in every change detection cycle. The recommended approach is to use a custom pipe to retrieve the short name.

shortName.pipe.ts

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "shortName"
})
export class ShortNamePipe implements PipeTransform {
  transform(fullName: string): any {
    return fullName
      .split(" ")
      .map(n => n[0])
      .join("");
  }
}

Usage in template:

{{'My Name' | shortName}}

Check out the demo 🚀

Answer 2

To achieve a shortened name display, you have two options. You can either create a custom method in your component or develop a custom Angular pipe.

Method for obtaining a short name:

getShortName(fullName) { 
  return fullName.split(' ').map(n => n[0]).join('');
}

Template usage:

<div class="people" *ngFor="let user of users">
    <div class="s-profile-icon">
        <img src={{user.picture}} alt="{{getShortName(user.full_name)}}" />
    </div>
    <div class="s-name">
        {{getShortName(user.full_name)}}
    </div>
</div>

Update 🔥

The approach above is considered bad practice as the method runs in every change detection cycle. The recommended approach is to use a custom pipe to retrieve the short name.

shortName.pipe.ts

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "shortName"
})
export class ShortNamePipe implements PipeTransform {
  transform(fullName: string): any {
    return fullName
      .split(" ")
      .map(n => n[0])
      .join("");
  }
}

Usage in template:

{{'My Name' | shortName}}

Check out the demo 🚀

Answer 3

Answer №2

To handle this situation effectively, consider creating a custom pipe: https://angular.io/guide/pipes

Pipes serve as converters that transform model values into display values. Once you have implemented your pipe, simply use it in your template like so:

<div class="s-name">
    {{user.full_name | myCustomNamePipe }}
</div>

Alternatively, you can bind to a method within the component. However, this approach may be less efficient due to how change detection works:

<div class="s-name">
    {{ getNamePieces(user) }}
</div>

Another option is to create a user view model and pre-select data for display using map, allowing you to directly bind to a calculated property.

Answer 4

To handle this situation effectively, consider creating a custom pipe: https://angular.io/guide/pipes

Pipes serve as converters that transform model values into display values. Once you have implemented your pipe, simply use it in your template like so:

<div class="s-name">
    {{user.full_name | myCustomNamePipe }}
</div>

Alternatively, you can bind to a method within the component. However, this approach may be less efficient due to how change detection works:

<div class="s-name">
    {{ getNamePieces(user) }}
</div>

Another option is to create a user view model and pre-select data for display using map, allowing you to directly bind to a calculated property.

Answer 5

Answer №3

I have enhanced the solution originally created by @malbarmavi, which can be found at

An additional parameter has been added to the pipe to allow users to specify the number of characters to display.

shortName.pipe.ts

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "shortName"
})
export class ShortNamePipe implements PipeTransform {
  transform(fullName: string, numChars: number = 2): any {
    return fullName
    .split(" ").slice(0,numChars)
      .map(n => n[0].toUpperCase())
      .join("");
  }
}

template

{{'My Name' | shortName:2}}

demo 🚀

Answer 6

I have enhanced the solution originally created by @malbarmavi, which can be found at

An additional parameter has been added to the pipe to allow users to specify the number of characters to display.

shortName.pipe.ts

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "shortName"
})
export class ShortNamePipe implements PipeTransform {
  transform(fullName: string, numChars: number = 2): any {
    return fullName
    .split(" ").slice(0,numChars)
      .map(n => n[0].toUpperCase())
      .join("");
  }
}

template

{{'My Name' | shortName:2}}

demo 🚀

How to extract the first initials from a full name using Angular TypeScript and *ngFor

Answer №1

Answer №2

Answer №3

Similar questions

Best practice for encapsulating property expressions in Angular templates

What is the best way to host a single page application within a sub-directory using nginx?

Rotating images on a canvas

Mastering the Art of Injecting Objects from the Server

Angular 4 allows for dynamically applying the active class to a clicked button, enhancing interactivity

Guide to sending a HTTP POST request with parameters in typescript

Show Timing on the Y-Axis - Bubble Graph

What is the best way to initialize elements once the data has finished loading?

Prevent selecting dates beyond the current date in Formly Datepicker within Angular

What is the best way to incorporate the "child_process" node module into an Angular application?

In TypeScript, the catch block does not get triggered

Is there an alternative to RequestOptionsArgs that I can use in this function?

There was an issue encountered when creating the class: The parameters provided do not correspond to any valid call target signature

Receiving an error in Typescript when passing an object dynamically to a React component

Tips for transferring information between service functions in Angular

Getting an Angular TypeError after upgrading to version 9? It seems that the property 'selectors' cannot be read from null

Deleting an element from an object in TypeScript

Determining the quantity of variations within a union in Typescript

Pass an array of objects to an Angular 8 component for rendering

Validating dynamic forms with multiple rows in Angular 9