Insert elements within the <li> tags within an ordered list in an Angular application

Question

Insert elements within the <li> tags within an ordered list in an Angular application

Within the component.html file of my Angular project, I have the following code snippet:

  <li *ngFor="let activity of dto.activities | sortHistoryActivity; trackBy: trackByFn">
    <span>
      <a (click)="scrollToHistoryActivity(activity.firstTaskId, activity.firstActivityId)">{{activity.title}}</a>
    </span>
    <p class="timestamp">{{activity.startTime | date:"dd.MM.yyyy, HH:mm:ss"}}</p>
  </li>
</ol>

I am looking to insert additional objects between specific <li> elements without resetting the numbering sequence. These inserted objects should not have a number associated with them.

Please excuse any lack of clarity as this is my first question on here.

For an example image, please refer to the link below:

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

To elaborate further: In this application, each action is listed with a corresponding number indicating its order of occurrence. My goal is to include certain HTML elements between two list items without affecting the numbering sequence (as illustrated in the provided image).

angular typescript frontend

Answer 1

Answer №1

Consider the HTML snippet below:

<ol #orderedListRef>
  <li>first</li>
  <li>second</li>
  <li>third</li>
  <li>fourth</li>
  <li>fifth</li>
  <li>sixth</li>
</ol>

This TypeScript code illustrates how to target the fourth list item and insert content after it:

@ViewChild('orderedListRef') olRef: ElementRef<HTMLOListElement>

.
.
.

// Access the native element using ViewChild
const ol: HTMLOListElement = olRef.nativeElement;

// Find the fourth list item which is a direct child of the ordered list
const fourthElement = ol.querySelector("li:nth-child(4)");

// Create an element to be inserted after the list item
const divToAppend: HTMLDivElement = document.createElement("div");
// Add desired content to the new element
divToAppend.innerHTML = "<h1>example text</h1>";

// Insert the new element after the listItem
fourthElement.after(divToAppend);

In this scenario, the result will be:

<ol #orderedListRef>
  <li>first</li>
  <li>second</li>
  <li>third</li>
  <li>fourth</li>
  <h1>example text</h1> <-----
  <li>fifth</li>
  <li>sixth</li>
</ol>

Answer 2

Consider the HTML snippet below:

<ol #orderedListRef>
  <li>first</li>
  <li>second</li>
  <li>third</li>
  <li>fourth</li>
  <li>fifth</li>
  <li>sixth</li>
</ol>

This TypeScript code illustrates how to target the fourth list item and insert content after it:

@ViewChild('orderedListRef') olRef: ElementRef<HTMLOListElement>

.
.
.

// Access the native element using ViewChild
const ol: HTMLOListElement = olRef.nativeElement;

// Find the fourth list item which is a direct child of the ordered list
const fourthElement = ol.querySelector("li:nth-child(4)");

// Create an element to be inserted after the list item
const divToAppend: HTMLDivElement = document.createElement("div");
// Add desired content to the new element
divToAppend.innerHTML = "<h1>example text</h1>";

// Insert the new element after the listItem
fourthElement.after(divToAppend);

In this scenario, the result will be:

<ol #orderedListRef>
  <li>first</li>
  <li>second</li>
  <li>third</li>
  <li>fourth</li>
  <h1>example text</h1> <-----
  <li>fifth</li>
  <li>sixth</li>
</ol>

Answer 3

Answer №2

If you're looking to dynamically add elements based on certain conditions, one way to do it is by utilizing the ng-container component provided by Angular. Here's an example:

<ol>
    <ng-container *ngFor="let activity of dto.activities | sortHistoryActivity; trackBy: trackByFn">
    <!-- Check if activity does not have a number -->
        <p *ngIf="!activity.number">Insert HTML here</p>

     <!-- Check if activity has a number -->
        <li *ngIf="activity.number">
            <span>
              <a (click)="scrollToHistoryActivity(activity.firstTaskId, activity.firstActivityId)">{{activity.title}}</a>
            </span>
            <p class="timestamp">{{activity.startTime | date:"dd.MM.yyyy, HH:mm:ss"}}</p>
        </li>
    </ng-container>
</ol>

Answer 4

If you're looking to dynamically add elements based on certain conditions, one way to do it is by utilizing the ng-container component provided by Angular. Here's an example:

<ol>
    <ng-container *ngFor="let activity of dto.activities | sortHistoryActivity; trackBy: trackByFn">
    <!-- Check if activity does not have a number -->
        <p *ngIf="!activity.number">Insert HTML here</p>

     <!-- Check if activity has a number -->
        <li *ngIf="activity.number">
            <span>
              <a (click)="scrollToHistoryActivity(activity.firstTaskId, activity.firstActivityId)">{{activity.title}}</a>
            </span>
            <p class="timestamp">{{activity.startTime | date:"dd.MM.yyyy, HH:mm:ss"}}</p>
        </li>
    </ng-container>
</ol>

Answer 5

Answer №3

If the numerical value holds significance, my suggestion would be to store it within the model and have control over its display.

To directly address your query, you have the option to specify the starting number of an ordered list (ol) using the start attribute.

<p>For example</p>
<ol>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
</ol>

<p>Insert HTML code snippet</p>
<ol start="4">
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
</ol>

This approach still necessitates keeping track of certain information, hence I believe it would be more efficient to store the order in your model and link your HTML to the respective order number as outlined in the model.

dto: {
  activities: {
    order: 1,
    name: 'Text'
  },
  // ... etc
}

<ul>
  <li *ngFor="let activity of dto.activities">
    {{activity.order}}. {{activity.name}}
  </li>
</ul>

Answer 6

If the numerical value holds significance, my suggestion would be to store it within the model and have control over its display.

To directly address your query, you have the option to specify the starting number of an ordered list (ol) using the start attribute.

<p>For example</p>
<ol>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
</ol>

<p>Insert HTML code snippet</p>
<ol start="4">
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
</ol>

This approach still necessitates keeping track of certain information, hence I believe it would be more efficient to store the order in your model and link your HTML to the respective order number as outlined in the model.

dto: {
  activities: {
    order: 1,
    name: 'Text'
  },
  // ... etc
}

<ul>
  <li *ngFor="let activity of dto.activities">
    {{activity.order}}. {{activity.name}}
  </li>
</ul>

Insert elements within the <li> tags within an ordered list in an Angular application

Answer №1

Answer №2

Answer №3

Similar questions

Diverse Templates within a Single Angular Component

Encountered an issue while resolving dependency tree for angular tslib

Something went wrong: [ERR_UNSUPPORTED_ESM_URL_SCHEME]: The default ESM loader only supports URLs with a scheme of file, data, and node

Encountering problem when creating new app with Angular CLI version 6.0.4 and specifying the

Angular 5 interception mechanisms

Restful: Numerous scenarios for a single resource (is it the same API endpoint?)

ESLint does not include Cypress files in its checking process

Angular 2: Challenges with Utilizing Set - Limited Browser Support and Iteration Issues

The "library" is encountering errors due to missing dependencies, specifically @angular/material/form-field

Steps to resolve the error "Cross-Origin Request Blocked: The Same Origin Policy prohibits reading the remote resource" in a project using Angular and .NET

How to implement automatic clicking using Material Angular components

Importing JS files or SDKs in Angular that are not modules

Learn how to retrieve data from the console and display it in HTML using Angular 4

Ensure that the default boolean value is set to false rather than being left as undefined

React TypeScript - creating a component with a defined interface and extra properties

Preventing Right-Click on Angular Material's CDK Overlay Container: A Step-by-Step Guide

Acquiring an element through ViewChild() within Angular

Is it possible to define a class prior to exporting it in typescript/angular? | TSLint warning: unused expression, assignment or function call expected

My Angular-based todo application has encountered an error notification from the system

Angular 2 web SQL definitions