What is preventing me from applying styles to the first word in my Angular ngFor iteration?

Question

What is preventing me from applying styles to the first word in my Angular ngFor iteration?

I'm currently attempting to customize the initial word of a string within my Angular ngFor loop. Strangely, the class gets applied but the style defined in my CSS file is not. Inline styling also does not seem to work - any ideas why?

This is the CSS I am trying to implement:

#page-image-title-table .first-entry-word {
  font-weight: 500;
}

Here is the function I am using to wrap the first word in an element with the aforementioned class:

formatTableEntry(tableEntry: string): string {
  const tableEntryParts = tableEntry.split(' ');
  const firstWord       = tableEntryParts[0];

  tableEntryParts.shift();

  const restOfString = tableEntryParts.join(' ');

  return `<span class="first-entry-word">${firstWord}</span> ${restOfString}`;
}

And this is the HTML code with my ngFor loop:

<div id="page-image-title-table">
  <div class="page-image-title-table-row" *ngFor="let tableEntry of tableEntries">
    <span [innerHTML]="formatTableEntry(tableEntry)"></span>
  </div>
</div>

You can view my demonstration here:

html css angular typescript

Answer 1

Answer №1

There appear to be several issues present.

Tying a function to the directive
```
[innerHTML]="formatTableEntry(tableEntry)"
```
may result in performance issues with the default change detection strategy.
The use of the innerHTML binding as attempted is not considered best practice in Angular.
The default value for font-weight: 500, while bold is equivalent to 700.
It seems that the Stackblitz is not functioning properly in Firefox and Chrome, although this may not directly relate to the main issue.

Potential Solution

You might consider creating a custom pipe to format the sentences as needed.

split.pipe.ts

@Pipe({
  name: 'split', 
  pure: true
})
export class SplitPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    if (!value) {
      return null;
    }

    return value.reduce((acc, curr) => {
      const [first, ...rest] = curr.split(" ");
      acc.push({ first: first, rest: rest.join(" ") });
      return acc;
    }, []);
  }
}

This custom pipe can then be used along with the *ngFor directive similar to how the keyvalue pipe works.

Feel free to give this approach a try.

app.component.ts

@Component({
  selector: "my-app",
  template: `
    <div id="page-image-title-table">
      <div 
        class="page-image-title-table-row" 
        *ngFor="let tableEntry of (tableEntries | split)"
      >
        <span>
          <span class="first-entry-word">{{ tableEntry.first }}</span>
          {{ tableEntry.rest }}
        </span>
      </div>
    </div>
  `,
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  tableEntries = [
    "First element of the array",
    "Second sample element of the array",
    "lorem ipsum dolor sit amet",
    "Quick brown fox jumps over the lazy dog"
  ];
}

app.component.css

#page-image-title-table .first-entry-word {
  font-weight: 700;
}

To see a live demonstration, you can visit the following link: Stackblitz

Answer 2

There appear to be several issues present.

Tying a function to the directive
```
[innerHTML]="formatTableEntry(tableEntry)"
```
may result in performance issues with the default change detection strategy.
The use of the innerHTML binding as attempted is not considered best practice in Angular.
The default value for font-weight: 500, while bold is equivalent to 700.
It seems that the Stackblitz is not functioning properly in Firefox and Chrome, although this may not directly relate to the main issue.

Potential Solution

You might consider creating a custom pipe to format the sentences as needed.

split.pipe.ts

@Pipe({
  name: 'split', 
  pure: true
})
export class SplitPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    if (!value) {
      return null;
    }

    return value.reduce((acc, curr) => {
      const [first, ...rest] = curr.split(" ");
      acc.push({ first: first, rest: rest.join(" ") });
      return acc;
    }, []);
  }
}

This custom pipe can then be used along with the *ngFor directive similar to how the keyvalue pipe works.

Feel free to give this approach a try.

app.component.ts

@Component({
  selector: "my-app",
  template: `
    <div id="page-image-title-table">
      <div 
        class="page-image-title-table-row" 
        *ngFor="let tableEntry of (tableEntries | split)"
      >
        <span>
          <span class="first-entry-word">{{ tableEntry.first }}</span>
          {{ tableEntry.rest }}
        </span>
      </div>
    </div>
  `,
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  tableEntries = [
    "First element of the array",
    "Second sample element of the array",
    "lorem ipsum dolor sit amet",
    "Quick brown fox jumps over the lazy dog"
  ];
}

app.component.css

#page-image-title-table .first-entry-word {
  font-weight: 700;
}

To see a live demonstration, you can visit the following link: Stackblitz

What is preventing me from applying styles to the first word in my Angular ngFor iteration?

Answer №1

Similar questions

What is the correct way to markup the semantic form label assistance text?

Challenges with aligning Fontawesome stacks

Tap on the image placeholder to replace it with your own image

Arrange gridster items horizontally in angular-gridster2 after reaching the mobile breakpoint

Handling the width and borders of CSS cells that are positioned outside of a table

How can I align 2 images side by side at the top and 1 beside them at the

Retrieving the value of a checkbox when clicked in Angular 2

The text that follows the cursor seems to stand out taller than the rest

Load link dynamically using the rel attribute

Using Selenium with C# to input text into an HTML <input> tag is not functioning properly

Solving Issues with Names, Modules, and Other Strange Elements in Angular Universal

Using the `ngrx` library to perform an entity upsert operation with the

Get the QR code canvas image with a customized background by downloading it

Extract information from a JSON file and import it into an Angular TypeScript file

Implement a feature in JavaScript that highlights the current menu item

Completing a submission on a bootstrap form, using innerHTML and displaying an alert

Is there a way to pass locale data using props in VueJS Router?

Having trouble getting CSS to center text properly. It just won't cooperate

The error message "TypeError: self.parent.parent.context.parseInt is not a function" indicates that

What steps can I take to use CSS to disable a webpage?