Retrieve words that begin with a specific letter

Looking to display address contents that start with the example DRACHMAN. I attempted to use match(), but it didn't work as expected. Here is my demo on Stackblitz.

HTML

    <form (ngSubmit)="onSubmit()" #Form="ngForm">
          <div class="form-group">
            <label for="address">Address</label>
            <textarea class="form-control" id="name"
                   required
                   [(ngModel)]="data.address" name="address"
                   #name="ngModel"></textarea>
             </div>
          <button type="submit" class="btn btn-success">Submit</button>
    
        </form>

Component

    data = {
        address: 'Bla..Bla..Bla.. 421 E DRACHMAN TUCSON AZ 5705-7598 USA'
      }

The desired output should look like the image seen here:

https://i.sstatic.net/sPNmS.png

Answer №1

When using the match function, remember it takes a regex as input.

Based on your explanation, it seems like you want to match the word DRACHMAN. This can be achieved with /DRACHMAN/. Additionally, you also need to match everything that comes after it (.)*.

As a result, we can combine these instructions in the following code snippet:

initialData = {
    address: "Bla..Bla..Bla..  421 E DRACHMAN  TUCSON AZ 5705-7598  USA"
  };
data = {
    ...this.initialData,
    address: this.initialData.address.match(/DRACHMAN(.)*/)
  };

Feel free to check out this fork for more details.

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

Is it possible for a component to have multiple templates that can be switched based on a parameter?

Scenario My task is to develop a component that fetches content from a database and displays it on the page. There needs to be two components working together to create a single page, following a specific component tree structure. DataList - receives ful ...

Showing json information in input area using Angular 10

I'm facing an issue with editing a form after pulling data from an API. The values I retrieve are all null, leading to undefined errors. What could be the problem here? Here's what I've tried so far: async ngOnInit(): Promise<void> ...

Creating a TypeScript library with Webpack without bundling may seem like a daunting task, but

Currently, I am developing a React component package using Typescript and NPM. During my research, I discovered that generating individual .js and .d.ts files is more beneficial than bundling them into one bundle.js file. However, I am facing difficulty in ...

How do I convert the ImagePicker type to Base64 in Ionic Capacitor?

I am currently developing an app using Ionic (Angular-based) along with Capacitor Plugins, specifically the Camera Plugin. The main feature I am working on involves allowing users to choose up to 5 images from their gallery. To accomplish this, I have impl ...

Converting Enum into an array in TypeScript to return the keys of the Enum

After defining the following enum: export enum Types { Type1 = 1, Type2 = 2, ... } We can create an array based on this enum with the function below: export function EnumKeys<T>(obj: object): string[] { return Object.keys(obj) ...

Enhance your coding experience with Visual Studio Resharper using TypeScript and node_modules

Currently using Visual Studio 2015 Update 3 and encountering an issue with Resharper when trying to Refactor TypeScript code. Resharper is attempting to refactor code in all folders, including the node_modules directory. This poses a problem as I do not wa ...

NodeJS executor fails to recognize Typescript's CommonJS Internal Modules

In the process of developing my NodeJS application, I am structuring it by creating internal modules to effectively manage my code logic. This allows me to reference these modules without specifying the full path every time. internal-module.ts export cla ...

Comparing Input and Output Event Binding

Can you provide reasons why using @Output for events is more advantageous than passing an @Input function in Angular 2+? Utilizing @Input: Parent Template: <my-component [customEventFunction]=myFunction></my-component> Inside parent-compone ...

When using Tailwind, be aware that the @screen directive does not automatically generate media queries in

Angular 12 & tailwind ^3.0.12 No media queries are being generated on the screen after compilation based on breakpoints. section { @apply w-full px-6 py-24; @screen sm { @apply py-14; } @screen md { @apply px-0 py-20 max-w-5xl mx-auto; ...

Enhancing the Look: A Guide to Angular Styling

As a newcomer to angular design and styling, I find myself facing a challenge in incorporating existing styles into my new project. My predecessor, who has since moved on from the project, had used certain styles that I need to adopt. Despite installing ui ...

A guide on how to retrieve images from a URL and save them using Blob in Angular 5

In my web application, I have a few links that lead to files with different content types - some are application/pdf and others are image/jpeg. When clicking on these links, the file should download or save based on their respective type. While downloadin ...

Encountered a problem with @types/ws while trying to upgrade from Angular 12 to Angular 13

After upgrading my project from Angular 12 to Angular 13, I encountered the following error: Error: node_modules/@types/ws/index.d.ts:328:18 - error TS2315: Type 'Server' is not generic. 328 server?: HTTPServer<V> | HTTPSServer< ...

TypeScript Redux actions not returning expected type

Basically, I am attempting to assign types to a group of functions and then match them in my Redux reducer. Here are the functions I have defined in actions.ts: export const SET_CART_ITEMS = "SET_CART_ITEMS"; export const SET_CART_TOTALS = "SET_CART_TOTA ...

What prevents us from returning Observable.of(false) in the catch block within the canActivate function?

In order to protect certain routes (admin), I utilize the canActivate feature. In this scenario, I employ an authGuard class/function: The issue arises when attempting to return an observable of boolean using: return Observable.of(false);. This approach d ...

Exploring the world of data binding in Angular 4

I am facing an issue with a component that has a variable called 'id'. In this component, I call a service that takes the 'id' variable as a parameter. I assign the value of a radio button to the 'id' variable in my template. ...

Having difficulty resolving all parameters for the component: (?, [object Object]) in the Jasmine component Unit Test

While defining a UT for a component with an extended class using i8nService and ChangeDetectionRef, I encountered an error preventing me from instantiating it: Failed: Can't resolve all parameters for BrandingMultiselectComponent: (?, [object Object] ...

Encountering an error message in Ionic/Angular: "No routes found that match the URL

Encountering an issue when trying to open the detailed view from a component within my list. Currently using Ionic 4. ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'algodetail' Many discussions on this error ...

Steps for deactivating SSR on specific pages in Nuxt3

I'm currently working on a project using Nuxt 3. One part of the application can only be accessed when the user is logged in. I'm trying to figure out how to turn off SSR for these specific routes, but still keep it enabled for the public routes. ...

Tips on applying borders to dynamically generated content in jspdf autotable, similar to a template

Having trouble adding borders to my PDF generated using jsPDF autotable. I want the layout to match the template, can someone assist me in resolving this issue? I need the header border to consist of two lines, similar to the template image provided below ...

A versatile tool for creating customizable components on the fly

I am looking to create a function within my service that generates dynamic components into a ViewChild reference... I attempted to do this by: public GenerateDynamicComponent(ComponentName: string, viewContainerRef: ViewContainerRef, data?: any) { sw ...