Click here to Skip to main content
14,579,188 members
Rate this:
Please Sign up or sign in to vote.
I have an array of objects from API I want when I click on a link ex: B, I want it to display all strings starts with "B". I'm new to angular so I don't how to do this.

What I have tried:

import { Component, OnInit } from '@angular/core';
import {DrugapiService} from '../drugapi.service';


@Component({
  selector: 'app-drug',
  templateUrl: './drug.component.html',
  styleUrls: ['./drug.component.scss']
})


export class DrugComponent implements OnInit {
  DrugNames:any;
  constructor(public _DrugapiService:DrugapiService) {

    _DrugapiService.getDrugName().subscribe((data)=>{
        this.DrugNames=data;
        console.log(this.DrugNames);
    },
    (err)=>{console.log(err)});
  }

  ngOnInit(): void {
  }

  alphbet=['a','b','c','d','e','f','g','h','i','j','k','l','m','n',
          'o','p','q','r','s','t','u','v','w','x','y','z'];

  match:any;
    medcineName:any;
  compareChar(i){
    for(let name of this.DrugNames){
      this.medcineName=name.medicine_name;
      console.log(this.medcineName); //until here working fine and display all names
    } 
    if(this.medcineName.charAt(0)===i){//but from here to the end not working and i'm also not sure of this code
      this.match=this.DrugNames;
      console.log(this.match);
      return this.match;
      // i was thinking here to return a html code like `<div *ngFor='let i of match' >{{i}}</div>`  but i don't think this is the right way i should do
    }
    else {
      return 'not Exist';
    }
  }

}


here the HTML code
<pre><div class="alphabet my-5 text-center">
    <h2 class="mb-5">Drug List From [A-Z]</h2>
    <span *ngFor='let i of alphbet ' class="ml-3 p-2">
        <a class="d-inline" routerLink='/drug' (click)="compareChar(this.i)">{{i}}</a>
    </span>
</div>

//here display all of them and i want to do something like that in a
<div *ngFor="let name of DrugNames">
    <h5 class="p-3">{{name.medicine_name}}</h5>
</div>
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100