CODEWITHSUNDEEP
cssangular
SGR
SGR

Reputation: 2417

To dynamic data using p tag in the same line

I have 2 JSON files called contacts and workersbased on the workersId present in contacts JSON, I am looping and displaying workers of the particular contact like this: enter image description here

Now the issue i am trying to display workers objects in a single line like this:

enter image description here

I am displaying workers objects in P tag, I have given css as display:inline; still it`s not displaying in the same line:

Below is the component code:

HTML

<h4>Contacts</h4>
<div class="cust-detail" *ngFor="let contact of contacts">
    <p><span><b>Name:</b></span> {{contact.name }}</p>
  <span><b>Assigned Workers</b></span>
  <div *ngFor="let workerId of contact.workers">
     <p class="workers">
          {{getWorkerById(workerId)}}
      </p>
  </div> 
    <hr>
</div>

TS

import { Component } from '@angular/core';
import { ContactService } from './contacts.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  contacts;
  workers;

  constructor(private myService: ContactService) {}

  ngOnInit() {
    this.myService.getContacts()
      .subscribe(res => this.contacts = res);
       this.myService.getWorkers()
      .subscribe(res => this.workers = res);
  }

    getWorkerById(workerId) {
      if (this.workers && this.workers.length > 0) {
        for(let w of this.workers) {
          if(w.id === workerId) 
            return w.name;
        }
      }
   }

}

CSS

.workers{
  display:inline;
}

DEMO

Upvotes: 1

Views: 886

Answers (4)

Chirag
Chirag

Reputation: 413

Try this for your new comment 

<h4>Contacts</h4>
<div class="cust-detail" *ngFor="let contact of contacts; let i = index">
    <tr>
        <td>Name</td>
        <td>{{contact.name }}</td>
    </tr>
    <tr>
        <td>Assigned Workers</td>
        <td>
      <div [ngClass]="{'all-workers' : showmore[i]==false }">
        <div *ngFor="let workerId of contact.workers;let j=index">
         <p class="workers" *ngIf="(showmore[i]==false &&j<=1)||showmore[i]==true">
           {{getWorkerById(workerId)}},
           </p>
      </div>
      </div>
       <button *ngIf="contact.workers.length>2" (click)="showmore[i]=!showmore[i]">{{(showmore[i])?"Show less":"Show more"}}</button> 
        </td>
    </tr>
    <hr>
</div>

Upvotes: 1

HUSSAIN
HUSSAIN

Reputation: 640

Try this

`

 <p *ngFor="let workerId of contact.workers">
      {{getWorkerById(workerId)}}
  </p>

`

Using *ngFor on p tag will do.

enter image description here

this is your view after applying *ngFor to the p tag

Upvotes: 0

ram12393
ram12393

Reputation: 1258

You need to change HTML and CSS as below

  <h4>Contacts</h4>
    <div class="cust-detail" *ngFor="let contact of contacts">
      <p><span><b>Name:</b></span> {{contact.name }}</p>
      <span><b>Assigned Workers</b></span>
      <div class="all-workers">
        <div *ngFor="let workerId of contact.workers">
          <p class="workers">
            {{getWorkerById(workerId)}} &nbsp;
          </p>
        </div>
      </div>
      <hr>
    </div>

and css

.all-workers{
  display: flex;
}

Demo

Upvotes: 1

Chirag
Chirag

Reputation: 413

Try this in HTML

<h4>Contacts</h4>
<div class="cust-detail" *ngFor="let contact of contacts">
    <p><span><b>Name:</b></span> {{contact.name }}</p>
  <p><b>Assigned Workers</b></p>
  <span *ngFor="let workerId of contact.workers">
     <p class="workers">
          {{getWorkerById(workerId)}} &nbsp;
      </p>
  </span> 
    <hr>
</div>

Upvotes: 1

Related Questions