CODEWITHSUNDEEP
angular
Dhawal Mhatre
Dhawal Mhatre

Reputation: 435

Angular passing service array from component to html in angular 5

I am new to angular 5, I have created an service for data

service.ts:

import { Injectable } from '@angular/core';
import { prmDataField } from '../_models/index'

 @Injectable()
 export class prmService {

    prmDataFields = [
new prmDataField('Training & Recruitment', 'expenses', 'billNo', 'totalAmt')];
 }

component.ts:

import { prmService } from '../data.service';
constructor(private prmDataLabel: prmService) {}

compontent.html

enter image description here

There are textbox under this head which are in service.ts, I want to load prmDataFields data to this textbox onload of page.

Upvotes: 0

Views: 267

Answers (2)

Michael Doye
Michael Doye

Reputation: 8171

In your service:

getFields() {

  prmDataFields: any[] = [
    new prmDataField('Training & Recruitment', 'expenses', 'billNo', 'totalAmt')
  ];

  return prmDataFields;
}

In your component:

this.fields = this.prmDataLabel.getFields()

Template:

<div *ngFor="let field of fields"> ... </div>

Take a look at this demo from the Angular docs to get an idea of how dynamic forms should work. It would also be a good idea to read through the example for this demo as well.

Upvotes: 1

Vincent Nguyen
Vincent Nguyen

Reputation: 1673

In your component you should define a variable to hold the prmDataFields:

prmDataFields = this.prmService.prmDataFields then

You loop through the array with ngFor to display wherever your text box is:

<div *ngFor="let dataField of prmDataFields">
    {{ dataField }}
</div>

Upvotes: 1

Related Questions