AngularJS

Filter the list with letter in angular JS.

Filter the list with letter in angular js
Filter the list with letter in angular js

By following these steps, you can create a world of alphabetical navigation filters in Angular, where each list has its own filter component. Each list will have its own set of items, and the alphabetical navigation component will filter the items accordingly.

HTML

<ul class="listAlphabet">
    <li><a href="javascript:void(null)" (click)="setFilter('ALL')">ALL</a></li>
    <li><a href="javascript:void(null)" (click)="setFilter('A')">A</a></li>
    <li><a href="javascript:void(null)" (click)="setFilter('B')">B</a></li>
    <li><a href="javascript:void(null)" (click)="setFilter('C')">C</a></li>
</ul>
<ul class="arrayAlphabet">
    <li *ngFor="let name of filteredList">{{ name.firstName }}</li>
</ul>
Filter the list with letter in angular js
Filter the list with letter in angular js

.ts

list: any[] = [
    { firstName: 'Alice' },
    { firstName: 'Bob' },
    { firstName: 'Charlie' },
    { firstName: 'Dave' },
    // Add more names as needed
  ];

  filteredList: any[];

  constructor() { }

  ngOnInit(): void {
    this.setFilter('ALL'); // Set the default filter to 'ALL' on component initialization
  }

  setFilter(letter: string): void {
    if (letter === 'ALL') {
      this.filteredList = this.list;
    } else {
      this.filteredList = this.list.filter(item =>
        item.firstName.startsWith(letter)
      );
    }
  }
Filter the list with letter in angular js
Filter the list with letter in angular js

SCSS

ul.listAlphabet {
    margin: 0;
    padding: 10px 10px;
    display: flex;
    justify-content: space-between;
    border: 1px solid #F5F5F5;
    overflow-x: auto;
    li {
        list-style: none;
        border-right: 1px solid #E5E5E5;
        &:last-child {
            border-right: 0;
        }        
        a {
            text-decoration: none;
            color: #999999;
            font-size: 14px;
            font-weight: 500;
            padding: 5px 10px;   
            text-transform: uppercase;         
        }
        &:first-child {
            a {
                color: #80B341;
            }            
        }
    }
}
ul.arrayAlphabet {
    margin: 15px 0 0 -24px;
    padding: 0;
    display: inline-block;
    @include media-breakpoint-between(md, xl) { 
        padding: 14px;
        
    }
    @include media-breakpoint-down(md) {
        margin-left: -22px;
    }
    li {
        list-style: none;
        border: 1px solid #F5F5F5;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        margin-left: 22px;
        float: left;
        margin-top: 10px;
        margin-bottom: 10px;
        @include media-breakpoint-between(md, xl) { 
            padding: 15px;
            margin-left: 15px;
        }
        @include media-breakpoint-down(md) {
            margin-left: 18px;
        }
    }
}

By calling setFilter('ALL') in the ngOnInit() method, the filter will be initially set to display all items in the list. When the “ALL” option is selected, the filteredList will be set to the entire list array, resulting in all items being displayed.

Filter the image list in angular JS.

HTML

<ul class="listAlphabet">
    <li><a href="javascript:void(null)" (click)="setFilter('ALL')">ALL</a></li>
    <li><a href="javascript:void(null)" (click)="setFilter('A')">A</a></li>
    <li><a href="javascript:void(null)" (click)="setFilter('B')">B</a></li>
    <li><a href="javascript:void(null)" (click)="setFilter('C')">C</a></li>
    <li><a href="javascript:void(null)" (click)="setFilter('D')">D</a></li>
    <li><a href="javascript:void(null)" (click)="setFilter('E')">E</a></li>
    <li><a href="javascript:void(null)" (click)="setFilter('F')">F</a></li>
    <li><a href="javascript:void(null)" (click)="setFilter('G')">G</a></li>
    <li><a href="javascript:void(null)" (click)="setFilter('H')">H</a></li>
    <li><a href="javascript:void(null)" (click)="setFilter('I')">I</a></li>
    <li><a href="javascript:void(null)" (click)="setFilter('J')">J</a></li>
    <li><a href="javascript:void(null)" (click)="setFilter('K')">K</a></li>
    <li><a href="javascript:void(null)" (click)="setFilter('L')">L</a></li>
    <li><a href="javascript:void(null)" (click)="setFilter('M')">M</a></li>
    <li><a href="javascript:void(null)" (click)="setFilter('N')">N</a></li>
    <li><a href="javascript:void(null)" (click)="setFilter('O')">O</a></li>
    <li><a href="javascript:void(null)" (click)="setFilter('P')">P</a></li>
    <li><a href="javascript:void(null)" (click)="setFilter('Q')">Q</a></li>
    <li><a href="javascript:void(null)" (click)="setFilter('R')">R</a></li>
    <li><a href="javascript:void(null)" (click)="setFilter('S')">S</a></li>
    <li><a href="javascript:void(null)" (click)="setFilter('T')">T</a></li>
    <li><a href="javascript:void(null)" (click)="setFilter('U')">U</a></li>
    <li><a href="javascript:void(null)" (click)="setFilter('V')">V</a></li>
    <li><a href="javascript:void(null)" (click)="setFilter('W')">W</a></li>
    <li><a href="javascript:void(null)" (click)="setFilter('X')">X</a></li>
    <li><a href="javascript:void(null)" (click)="setFilter('Y')">Y</a></li>
    <li><a href="javascript:void(null)" (click)="setFilter('Z')">Z</a></li>
</ul> 
<ul class="arrayAlphabet">
    <li *ngFor="let item of filteredList">
        <a [href]="item.link" target="_blank"><img [src]="item.image" alt="Image"></a>                        
      </li>
</ul>
filter image list in angular code
filter image list angular code

.ts

export class NameComponent implements OnInit {
  list: any[] = [
    // A
    { firstName: 'A', image: 'assets/img/logos/a/a.png', link: 'https://smartlearningtutorials.com/' },
    { firstName: 'A', image: 'assets/img/logos/a/a-1.png' },
    // B
    { firstName: 'B', image: 'assets/img/logos/b/b1.png' },
    { firstName: 'B', image: 'assets/img/logos/b/b2.png' },
    // C
    { firstName: 'C', image: 'assets/img/logos/c/c1.png' },
    { firstName: 'C', image: 'assets/img/logos/c/c2.png' },
    // D
    { firstName: 'D', image: 'assets/img/logos/d/d1.png' },
    { firstName: 'D', image: 'assets/img/logos/d/d2.png' },
    .
    .
    .
    // Z
    { firstName: 'Z', image: 'assets/img/logos/d/d1.png' },
    { firstName: 'Z', image: 'assets/img/logos/d/d2.png' },
  ];

  filteredList: any[];
  //selectedLetter: string;

  constructor() {}

  ngOnInit(): void {
    this.setFilter('ALL');
  }

  setFilter(letter: string): void {
    //this.selectedLetter = letter;
    if (letter === 'ALL') {
      this.filteredList = this.list;
    } else {
      this.filteredList = this.list.filter(item =>
        item.firstName.startsWith(letter)
        // item.image.toLowerCase().startsWith(letter.toLowerCase())
      );
    }
  }
}
filter image list in angular ts code
filter image list angular ts code

Add active class to current selection to attached active class.


<ul>
  <li [class.active]="selectedLetter === 'ALL'">
    <a href="javascript:void(null)" (click)="setFilter('ALL')">ALL</a>
  </li>
  <li *ngFor="let letter of 'abcdefghijklmnopqrstuvwxyz'.split('')"
      [class.active]="selectedLetter === letter">
    <a href="javascript:void(null)" (click)="setFilter(letter)">{{ letter }}</a>
  </li>
</ul>
<ul>
  <li *ngFor="let item of filteredList">
    <a [href]="item.link">
      <img [src]="item.image" alt="Image">
    </a>
  </li>
</ul>
<ul class="listAlphabet">
    <li [class.active]="selectedLetter === 'ALL'">
        <a href="javascript:void(null)" (click)="setFilter('ALL')">ALL</a>
    </li>
    <li *ngFor="let letter of 'abcdefghijklmnopqrstuvwxyz'.split('')"
        [class.active]="selectedLetter === letter">
        <a href="javascript:void(null)" (click)="setFilter(letter)">{{ letter }}</a>
    </li>
</ul> 

In the updated code, a new selectedLetter property is added to store the currently selected letter. When a letter is clicked, the setFilter function sets the selectedLetter to the clicked letter.

In the template, the <li> elements for the letters are given the active class if the selectedLetter matches the current letter. This class can be styled in your CSS to highlight the selected letter.

In this updated code, the list array now includes a link property for each image, which holds the corresponding link URL. In the template, the <img> tag is wrapped within an <a> tag, and the href attribute of the <a> tag is bound to the item.link property. This ensures that each image will have its own href based on the provided link in the list array.

Please replace the 'https://smartlearningtutorials.com/', with the actual URLs you want to use for each image.


Learn HTML/CSS from W3 School Website