Styjun

Why does The Ancient One think differently about Doctor Strange in Endgame than the film Doctor Strange?

how do you harvest carrots in creative mode

Which note goes on which side of the stem?

What is the difference between true neutral and unaligned?

Why is my Earth simulation slower than the reality?

Are there any elected officials in the U.S. who are not legislators, judges, or constitutional officers?

How to use "Du hast/ Du hattest'?

Avoiding racist tropes in fantasy

Shouldn't the "credit score" prevent Americans from going deeper and deeper into personal debt?

Why different interest rates for checking and savings?

If all stars rotate, why was there a theory developed, that requires non-rotating stars?

Which household object drew this pattern?

Is there any way to keep a player from killing an NPC?

How would one country purchase another?

How do I request a longer than normal leave of absence period for my wedding?

Justifying the use of directed energy weapons

Why is Boris Johnson visiting only Paris & Berlin if every member of the EU needs to agree on a withdrawal deal?

Why were movies shot on film shot at 24 frames per second?

Why is less being run unnecessarily by git?

Did a flight controller ever answer Flight with a no-go?

Fried gnocchi with spinach, bacon, cream sauce in a single pan

Was there ever a treaty between 2 entities with significantly different translations to the detriment of one party?

I have a player who yells

Defense against attacks using dictionaries

How to link a table to a detail view in Angular

Angular HTML bindingangular 2 master-detail share observable for updateHuge number of files generated for every Angular projectAngular2 displaying data from http getAsync Pipe Not Handling Subscription as Expected in Angular 2 AppRestriction for the data rendering into the table with Angular and BootstrapHow to create an Angular 2+ *ngFor filled table with a record in every cell?Using Ellipsis in Angular Material TableCan't get data from web api in AngularHow to create a view for a item in a table from a web api in Angular

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

I have a table in Angular which takes data from a web api and its populated with it. What I want to do is link the first column which is the (sys_id) ID number to a detail view of that ID number.

I understand this has to do with making a GET request to that api with the specific ID number to get that record. I have created a service for this, which is:

service.ts

 getIncident(sys_id): Observable<any> 
 return this.http.get<any>(this.incidentApiUrl + "/" + sys_id)
 .pipe(
 catchError(this.handleError)
 );
 

table.component

<tbody>
 <tr class="" *ngFor="let incident of data">
 <td><a href="">incident.number</a></td>
 <td style="text-overflow: ellipsis;">incident.s</td>
 <td>incident.n</td>
 <td>incident.u</td>
 <td style="text-overflow: ellipsis;">incident.sub</td>
 </tr>
 </tbody>

So my question is how do I link the detail view to the first column and populate that view with the details?

Thanks

angular

share|improve this question

asked Mar 27 at 16:57

SoleSole

55944 gold badges99 silver badges2727 bronze badges

add a comment | 

0

I have a table in Angular which takes data from a web api and its populated with it. What I want to do is link the first column which is the (sys_id) ID number to a detail view of that ID number.

I understand this has to do with making a GET request to that api with the specific ID number to get that record. I have created a service for this, which is:

service.ts

 getIncident(sys_id): Observable<any> 
 return this.http.get<any>(this.incidentApiUrl + "/" + sys_id)
 .pipe(
 catchError(this.handleError)
 );
 

table.component

<tbody>
 <tr class="" *ngFor="let incident of data">
 <td><a href="">incident.number</a></td>
 <td style="text-overflow: ellipsis;">incident.s</td>
 <td>incident.n</td>
 <td>incident.u</td>
 <td style="text-overflow: ellipsis;">incident.sub</td>
 </tr>
 </tbody>

So my question is how do I link the detail view to the first column and populate that view with the details?

Thanks

angular

share|improve this question

asked Mar 27 at 16:57

SoleSole

55944 gold badges99 silver badges2727 bronze badges

add a comment | 

I have a table in Angular which takes data from a web api and its populated with it. What I want to do is link the first column which is the (sys_id) ID number to a detail view of that ID number.

I understand this has to do with making a GET request to that api with the specific ID number to get that record. I have created a service for this, which is:

service.ts

 getIncident(sys_id): Observable<any> 
 return this.http.get<any>(this.incidentApiUrl + "/" + sys_id)
 .pipe(
 catchError(this.handleError)
 );
 

table.component

<tbody>
 <tr class="" *ngFor="let incident of data">
 <td><a href="">incident.number</a></td>
 <td style="text-overflow: ellipsis;">incident.s</td>
 <td>incident.n</td>
 <td>incident.u</td>
 <td style="text-overflow: ellipsis;">incident.sub</td>
 </tr>
 </tbody>

So my question is how do I link the detail view to the first column and populate that view with the details?

Thanks

angular

share|improve this question

asked Mar 27 at 16:57

SoleSole

55944 gold badges99 silver badges2727 bronze badges

 getIncident(sys_id): Observable<any> 
 return this.http.get<any>(this.incidentApiUrl + "/" + sys_id)
 .pipe(
 catchError(this.handleError)
 );
 

<tbody>
 <tr class="" *ngFor="let incident of data">
 <td><a href="">incident.number</a></td>
 <td style="text-overflow: ellipsis;">incident.s</td>
 <td>incident.n</td>
 <td>incident.u</td>
 <td style="text-overflow: ellipsis;">incident.sub</td>
 </tr>
 </tbody>

angular

angular

share|improve this question

asked Mar 27 at 16:57

SoleSole

55944 gold badges99 silver badges2727 bronze badges

share|improve this question

asked Mar 27 at 16:57

SoleSole

55944 gold badges99 silver badges2727 bronze badges

asked Mar 27 at 16:57

SoleSole

55944 gold badges99 silver badges2727 bronze badges

asked Mar 27 at 16:57

SoleSole

55944 gold badges99 silver badges2727 bronze badges

1 Answer
1

active

oldest

votes

1

You could have a component that taking an ID as parameter would call you api and display the data.
Using a router you could define the url /incident/:id
And your component to use the "id" in the url and call the api with it's value. So then on your table you just have to define a link to the /incident/:id for each row.

Router :

 path: 'incident/:id', component: IncidentComponent,

IncidentComponent :

import Component from '@angular/core';
import ApiService from 'app/services/api.service';

import ActivatedRoute from '@angular/router';

@Component(
 selector: 'app-incident',
 templateUrl: './incident.component.html',
 styleUrls: ['./incident.component.scss']
)
export class IncidentComponent {

 constructor(private apiService: ApiService, private route: ActivatedRoute) 

 private sub: any;
 idParam: string = "";
 ngOnInit() 
 this.sub = this.route.params.subscribe(params => 
 this.idParam = params['id'];
 //make you api call here
 );
 

share|improve this answer

edited Mar 28 at 11:44

answered Mar 27 at 17:07

Hijack_HornetHijack_Hornet

8144 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55382685%2fhow-to-link-a-table-to-a-detail-view-in-angular%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

You could have a component that taking an ID as parameter would call you api and display the data.
Using a router you could define the url /incident/:id
And your component to use the "id" in the url and call the api with it's value. So then on your table you just have to define a link to the /incident/:id for each row.

Router :

 path: 'incident/:id', component: IncidentComponent,

IncidentComponent :

import Component from '@angular/core';
import ApiService from 'app/services/api.service';

import ActivatedRoute from '@angular/router';

@Component(
 selector: 'app-incident',
 templateUrl: './incident.component.html',
 styleUrls: ['./incident.component.scss']
)
export class IncidentComponent {

 constructor(private apiService: ApiService, private route: ActivatedRoute) 

 private sub: any;
 idParam: string = "";
 ngOnInit() 
 this.sub = this.route.params.subscribe(params => 
 this.idParam = params['id'];
 //make you api call here
 );
 

share|improve this answer

edited Mar 28 at 11:44

answered Mar 27 at 17:07

Hijack_HornetHijack_Hornet

8144 bronze badges

add a comment | 

1

You could have a component that taking an ID as parameter would call you api and display the data.
Using a router you could define the url /incident/:id
And your component to use the "id" in the url and call the api with it's value. So then on your table you just have to define a link to the /incident/:id for each row.

Router :

 path: 'incident/:id', component: IncidentComponent,

IncidentComponent :

import Component from '@angular/core';
import ApiService from 'app/services/api.service';

import ActivatedRoute from '@angular/router';

@Component(
 selector: 'app-incident',
 templateUrl: './incident.component.html',
 styleUrls: ['./incident.component.scss']
)
export class IncidentComponent {

 constructor(private apiService: ApiService, private route: ActivatedRoute) 

 private sub: any;
 idParam: string = "";
 ngOnInit() 
 this.sub = this.route.params.subscribe(params => 
 this.idParam = params['id'];
 //make you api call here
 );
 

share|improve this answer

edited Mar 28 at 11:44

answered Mar 27 at 17:07

Hijack_HornetHijack_Hornet

8144 bronze badges

add a comment | 

You could have a component that taking an ID as parameter would call you api and display the data.
Using a router you could define the url /incident/:id
And your component to use the "id" in the url and call the api with it's value. So then on your table you just have to define a link to the /incident/:id for each row.

Router :

 path: 'incident/:id', component: IncidentComponent,

IncidentComponent :

import Component from '@angular/core';
import ApiService from 'app/services/api.service';

import ActivatedRoute from '@angular/router';

@Component(
 selector: 'app-incident',
 templateUrl: './incident.component.html',
 styleUrls: ['./incident.component.scss']
)
export class IncidentComponent {

 constructor(private apiService: ApiService, private route: ActivatedRoute) 

 private sub: any;
 idParam: string = "";
 ngOnInit() 
 this.sub = this.route.params.subscribe(params => 
 this.idParam = params['id'];
 //make you api call here
 );
 

share|improve this answer

edited Mar 28 at 11:44

answered Mar 27 at 17:07

Hijack_HornetHijack_Hornet

8144 bronze badges

 path: 'incident/:id', component: IncidentComponent,

import Component from '@angular/core';
import ApiService from 'app/services/api.service';

import ActivatedRoute from '@angular/router';

@Component(
 selector: 'app-incident',
 templateUrl: './incident.component.html',
 styleUrls: ['./incident.component.scss']
)
export class IncidentComponent {

 constructor(private apiService: ApiService, private route: ActivatedRoute) 

 private sub: any;
 idParam: string = "";
 ngOnInit() 
 this.sub = this.route.params.subscribe(params => 
 this.idParam = params['id'];
 //make you api call here
 );
 

share|improve this answer

edited Mar 28 at 11:44

answered Mar 27 at 17:07

Hijack_HornetHijack_Hornet

8144 bronze badges

answered Mar 27 at 17:07

Hijack_HornetHijack_Hornet

8144 bronze badges

answered Mar 27 at 17:07

Hijack_HornetHijack_Hornet

8144 bronze badges