Htykuut

I have a list of architects.
Every time when an architect begins with a new letter, I should add a single letter, to structure the list of architects:

Example:

A

ABC Architects
Arctical Architects

B

Boston Architects

D

Dutch Architects

etc.

my actual code:

 <ul class="architect-list">

  <li *ngFor="let architect of architects">

    <div class="single-architect" (click)="selectArchitect(architect.title)" [innerHTML]="architect.title">

    </div>

  </li>

</ul>

How can I add the letters without modifying the list?

Remark: the Letters should not be linked.

You can create a method that would return to you a boolean to decide if the placeholder alphabet should be displayed or not. This is should do by comparing the first character of each architect name with a property on the Component. It should also make sure to update that property as soon as a name with a new alphabet starts in the list.

Give this a try:

<ul class="architect-list">



    <ng-container *ngFor="let architect of architects">

        <ng-container *ngIf="checkIfNew(architect.title)">

            {{ architect.title.charAt(0).toUpperCase() }}

        </ng-container>

        <li>

            <div class="single-architect" (click)="selectArchitect(architect.title)" [innerHTML]="architect.title">

            </div>

        </li>

    </ng-container>

</ul>

Component Class:

import { Component } from '@angular/core';



@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  currentAlphabet;

  architects = [...];



  checkIfNew(title: string) {

    if(this.currentAlphabet === title.charAt(0).toLowerCase()) {

      return false;

    } else {

      this.currentAlphabet = title.charAt(0).toLowerCase();

      return true;

    }

  }

}

Here's a Sample StackBlitz for your ref.

You can achieve this by writing the small function in your Component and calling the same from the HTML. But at the same time this is not the optimal solution from the performance point of view and you need to move this logic to the custom directive. so here is the answer.

The working stackblitz example is here.

code required in component

checkLetter(architect: any, i: number) {

let Initial = '';

if (i === 0) {

  Initial = this.architects[0].title.charAt(0);

} else {

  if (this.architects[i].title.charAt(0) === this.architects[i - 1].title.charAt(0)) {

    Initial = '';

  }

  else {

    Initial = this.architects[i].title.charAt(0);

  }

}

return Initial;

}

code required in html

<ul class="architect-list">

<ng-container *ngFor="let architect of architects; let i = index">

    <ng-container>

        {{checkLetter(architect, i)}}

    </ng-container>

    <li>

        <div class="single-architect" (click)="selectArchitect(architect.title)" [innerHTML]="architect.title">

        </div>

    </li>

</ng-container>

Here is a sample stack blitz I through together with a similar array of data.

in your template, you can get the previous item in your array by using the index and subtracting one.

  <ul class="genre-list">

  <li *ngFor="let genere of musicGeneres; let index = index;">

    <div *ngIf="isStartingAlaphet(genere, musicGeneres[index - 1])">

    {{ genere[0] }}

    </div>

    <div [innerHTML]="genere">

    </div>

  </li>

</ul>

then have a small pure function that checks first if the previous item exists, if it doesn't' then we are on A and display it. If not then compare the current items first letter to the previous items first letter.

 isStartingAlaphet(current, previous){

    // if there is no previous one then a

    if(!previous){

      return current[0]

    }

    return current[0] !== previous[0]

  }

This depends on your list being in Alphabetical order but it also keeps any messy code where your component has to "track" the previous item and rely on impure functions.

To use this type of solution with your more complex array you simply need to pass in the titles:

<div *ngIf="isStartingAlaphet(architect.title, architects[index - 1]?.title)">

   {{ architect.title[0] }}

 </div>

https://stackblitz.com/edit/angular-mw7tp2

You could use reduce in the component, assuming that the original architect's list is an array:

const objectkeys = Object.keys;

const list = ['Aaarchitext', 'Brand New Architect', 'Clydesdale Architect'];

const newList = this.getReorderedList();



function getReorderedList(): void {

  return list.reduce((grp, a, b) => {

    if (!grp[a.slice(0,1)]) {

      grp[a.slice(0,1)] = ;

    }

    grp[a.slice(0,1)].push(a);

    return grp;

  }, {});

}

Then in your template:

<ul class="architect-list">

  <ng-container *ngFor="let firstLetter of objectkeys(newList)">

    <li>{{ firstLetter }}</li>

    <ng-container *ngFor="let architect of newList[firstLetter]">

      <div

        class="single-architect"

        (click)="selectArchitect(architect.title)"

        [innerHTML]="architect.title">

      </div>

    </ng-container>

  </ng-container>

</ul>

That should solve your issue. You also only have to call the method just once in the beginning (ie in your ngOnInit()), no constant calling to the component.