CODEWITHSUNDEEP
angulartypescriptloops
PabloPhones
PabloPhones

Reputation: 123

loop over return elements by http

I have service that returns me the data from SQL via HTTP. In my component I have code:

export class GetFruitsComponent implements OnInit {

  valuesFruits: any;

  constructor(private srv: SendRecvService) {
    this.getFruits();
   }

  ngOnInit() {
  }

  getFruits() {
    this.srv.GetFruits().subscribe(response => {
      this.valuesFruits = response;
    }, error => {
      console.log(error);
    });
  }
}

In Html I have:

<ul>
    <li *ngFor = "let fruit of valuesFruits">
            {{fruit.userId}}
    </li>
</ul>

This

 {{fruit.userId}}

is a number. And what I want is that in this place I want to have another value from different table. I have already prepared function where as argument I would place the value of:

 {{fruit.userId}}

Where can I invoke this method?

Upvotes: 0

Views: 43

Answers (1)

Vadim
Vadim

Reputation: 3439

pipe can be used in that case:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'capitalizeMe' })
export class CapitalizePipe implements PipeTransform {

// put your method instead inside transform, input is the data you want to modify
transform(input: string): string {
  return input && input.length
    ? (input.charAt(0).toUpperCase() + input.slice(1).toLowerCase())
    : input;
  }
}

In App module or another module (component, in which you want to use that pipe, must be declared in that module):

import { CapitalizePipe } from './pipes/capitilize.pipe';
import { GetFruitsComponent } from './get-fruits.component';

@NgModule({
  imports: [],
  declarations: [
    GetFruitsComponent,
    CapitalizePipe
  ]
})
export class AppModule { }

Use pipe in your component html:

// fruit.description is just for example here
{{ fruit.description | capitalizeMe }}

Upvotes: 1

Related Questions