What is the method for inserting two dashes within a number?

For the output, I am looking to showcase a number in the following format => 979-9638403-03.

At present, the number appears like this => 979963840303.

portfolio.ts

export class Portfolio {
    ...
    DEPO: number;         /* DEPO */
    
    constructor() {
        ...
        this.DEPO = 0;   /* DEPO */
    }
}

online.component.html

{{ ((currentPortfolio$ | async)?.DEPO) }}

Is there a way to insert dashes for a more visually appealing result? The number is retrieved from a webservice for reference.

I'm uncertain if Angular supports this functionality. Any insights?

angulartypescript

Answer №1

Take a look at Angular's Slice Pipe:

If you want to manipulate numbers as strings, you can use the following code snippet:

{{ '979963840303' | slice:0:3 }}-{{ '979963840303' | slice:3:-2 }}-{{ '979963840303' | slice:-2 }}

This code will result in:

979-9638403-03

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

Manage and execute a sequence of multiple actions with Redux-Observable

Utilizing redux-observable, my goal is to generate multiple WORK actions from a single epic. Here's what I have so far: ( action$, state$ ) => { return action$.pipe( ofType( 'SPAWN' ), flatMap( action => { retu ...

angularrxjsobservablengrxredux-observable

Eliminate the need to input the complete URL every time when making server calls

Currently, my springbok application has a React-Typescript frontend that is functioning well. I am using the request-promise library to make requests like this: get('http://localhost:8080/api/items/allItems', {json: true}). However, I would like ...

javascriptreactjsspringtypescriptnpm

Utilizing the `in` operator for type narrowing is yielding unexpected results

Attempting to narrow down a type in TypeScript: const result = await fetch('example.com') if (typeof result === "object" && "errors" in result) { console.error(result.errors); } To clarify, the type of result before the if condition should be ...

typescript

Utilizing [src] syntax in Angular 2 and webpack to efficiently import images

When attempting to import an image in my Angular 2 application, I encountered an issue. I tried using the following code: <img *ngIf="person.status" [src]="{{IMAGE_URL}}" width="20" height="20" /> However, the problem arose when using the [src] tag ...

angularwebpack

What is the proper way to utilize e.key and e.target.value in TypeScript when coding with React?

I'm struggling to get e.key and e.target.value working with the following code: const handleInputKeyPress = (e: React.KeyboardEvent<HTMLInputElement> ) => { if(e.key ==='Enter') { dfTextQuery(e.target.value) } }; Why is & ...

reactjstypescript

Incorporating a new function into a TypeScript (JavaScript) class method

Is it possible to add a method to a method within a class? class MyClass { public foo(text: string): string { return text + ' FOO!' } // Looking for a way to dynamically add the method `bar` to `foo`. } const obj = new MyCl ...

javascripttypescriptmethods

Netlify failing to build CRA due to inability to locate local module for method?

I encountered an issue with deploying my site on Netlify. The problem arises when it fails to locate local modules. Below is the log: 12:54:43 AM: Build ready to start 12:54:45 AM: build-image version: 09c2cdcdf242cf2f57c9ee0fcad9d298fad9ad41 12:54:45 AM: ...

reactjstypescriptdeploymentbuildnetlify

When inserting a child element before the myArray.map(x => ) function, it results in rendering only a single child element from the array

Sorry for the confusion in my explanation, but I'm encountering an issue with displaying elements from an array. Here is the code snippet I am working on. Currently, the myArray contains 10 elements. When I place the <LeadingChild/> component ...

reactjstypescriptnext.jsmap-function

Angular 7 makes it a breeze to move elements using the drag and

Is there a way to drag and drop elements from an expansion panel while still keeping them displayed within the panel after being dropped? I am looking for Angular 7 code to achieve this functionality. Your assistance is much appreciated. I attempted to dr ...

angulardrag-and-dropangular7angulardraganddroplists

Having difficulty casting the parameter type from Array.find() in TypeScript

In my codebase, I am dealing with the OrganisationInterface type: export declare interface OrganisationInterface { documents?: { [documentType: OrganisationDocumentTypesList]: { // enum id: string; name: string; ...

typescript

Angular: the xhrRequest is failing to be sent

I am facing an issue with a service function that handles an HTTP post request. The request does not get sent for some reason. However, when I add a subscription to the post method, the request is successfully executed. In other services that have the sam ...

angulartypescript

Ways to capture the selected item from an Angular 12 reactive dropdown list when a change event occurs

When working with an Angular 12 reactive form, I encountered a situation where I have a dropdown list that triggers the change event. The data in the dropdown list is not just a simple list of strings but of a specific Type. However, upon returning the se ...

angularrxjsreactive

Issue with Angular 6: Dynamic Meta tag malfunctioning while sharing page on Facebook with og:description tag

I am facing an issue where I want to update the meta tags dynamically using API calls. The updated data shows correctly when inspected, but when sharing the link on Facebook, it does not reflect the changes. Index.html <meta name="description" conte ...

angulardynamicangular5angular6meta-tags

Is there a way to display the number of search results in the CodeMirror editor?

After conducting some research on how to integrate the search result count in Codemirror like the provided image, I was unable to find any solutions. I am currently working with Angular and utilizing ngx-codemirror, which led me to realize that editing the ...

angulartypescriptcodemirror

How do you verify an OpenID Connect access token produced by Azure AD v2 in an ASP.NET Core web API?

What is the best way to verify an OpenID Connect Access Token generated by Azure AD (v2) in ASP.NET Core Web API? Here's the situation: I have an Angular 8 Client Application that receives an OpenID Connect access Token post Login. The Client can us ...

c#angularazure-active-directoryasp.net-core-webapiopenid-connect

What is the Correct Way to Send Functions to Custom Directives in Angular 2 Using TypeScript?

I am relatively new to Angular 2. I am currently in the process of upgrading my application from AngularJS and focusing on completing the UI/UX development. There is one final issue that I am seeking help with, and I appreciate any assistance provided. Cu ...

angulartypescriptangular2-templateangular2-directivesangular2-components

What are the best strategies for managing npm dependencies alongside other packages?

I am working on an Angular app that has the following dependencies: "dependencies": { "personalUiLibrary": "1.0.0" }, "devDependencies": { "tailwindcss": "^2.2.7" } In the personalUiLibrary p ...

angularnpmnpm-install

Exploring Angular 4.3 Interceptors: A Practical Guide

I am currently working on a new app that needs authorization headers. Normally, I follow a similar approach to what is described in this article on scotch.io. However, I have recently learned that Angular 4 now fully supports HTTP Interceptors through the ...

angulartypescriptangular-httpangular-http-interceptors

Having difficulty retrieving the file from Google Drive through googleapis

I'm currently attempting to retrieve a file from Google Drive using the Googleapis V3, but I keep encountering an error message stating: 'Property 'on' does not exist on type 'GaxiosPromise<Schema$File>'. Below is the c ...

node.jstypescriptpromisegoogle-drive-api

Using RxJs: switchMap conditionally based on the emitted value being empty

Below is the code snippet I am currently dealing with: const id = 1; // id = 2 of([{id: 1, name: 'abc'}]).pipe( map(items => items.find(item => item.id === id)), switchMap(item => item ? of(item) : this.makeHttp ...

angularrxjs