I am currently working with two JSON files named contacts and workers. Using the workerId present in the contacts JSON, I have implemented a loop to display workers associated with each contact. The current display looks like this:
https://i.sstatic.net/ARF8k.png
However, I am facing an issue where I am trying to showcase the workers objects in a single line as shown below:
https://i.sstatic.net/RJAsl.png
Even after applying CSS styling as display:inline;, the desired inline display is not achieved:
Refer to the component code snippet provided below:
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;
}