Angular passing service array from component to html in angular 5

Question

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

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

Michael Doye · Accepted Answer · 2018-05-15 13:33:41Z

1

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.

answered May 15, 2018 at 13:33

Michael Doye

8,2115 gold badges43 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vincent Nguyen · Accepted Answer · 2018-05-15 13:29:43Z

1

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>

answered May 15, 2018 at 13:29

Vincent Nguyen

1,6934 gold badges20 silver badges35 bronze badges

Collectives™ on Stack Overflow

Angular passing service array from component to html in angular 5

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related