Pass ID(Index) to onEditDetail() Parameters

Question

How can i pass the value index or id to EditDetail() parameters. I want it to be put inside the parenthesis of onEditDetail() once i click the onEditDetail() in html

ngOnInit() {
  this.route.params
    .subscribe((params: Params) => {
      this.id = +params['id'];
      this.user = this.userService.getUser(this.id);
    });
}

onEditDetail(id: string) {
  console.log(id);
}

user-detail.component.html

 <div class="container">
  <div class = "row">
    <div class="col-md-3"></div>
    <div class = "col-md-8">
      <div class="card">
        <div class="card-header">
          {{ user.l_name}} 's Complete Information<span class="pull-right"><input class="form-control" placeholder="Search User" name="srch-term" id="srch-term" type="text"></span>
        </div> 
        <table class="table table-responsive">
          <thead class="thead-default">
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Contact Number</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{{ user.f_name }}</td>
              <td>{{ user.l_name }}</td>
              <td>{{ user.contact_no }}</td>
              <td><button class=" btn btn-primary" style="cursor: pointer;" (click)="onEditDetail()">Edit</button> </td>
            </tr>
          </tbody>
        </table>     
      </div>
    </div>
  </div>
</div>

Dheeraj Kumar · Answer 1 · 2017-08-29T11:10:20.580

1

Adding to other answers,

You need to understand that you are making an asynchronous call.

So If you need to access id anywhere else, you need to get that on completion of asynchronous call, not before that.

And this is reason, you need to call onEditDetail() inside Subscribe block as last parameter. there are 3 params to subscribe.

Data which is returned by call,
Error if any occured.
On complete if you wish to do something.

In your case, as 3rd parameter, you have to call onEditDetail method

ngOnInit() {
  this.route.params
    .subscribe((params: Params) => {
      this.id = +params['id'];
      this.user = this.userService.getUser(this.id);

      // 3rd parameter, this is where call is subscribe is completed
      this.onEditDetail(this.id);
    });
}

edited Aug 29 '17 at 11:10

answered Aug 29 '17 at 10:05

Dheeraj Kumar

3,917
8
43
80

It says Argument of type number is not assignable to parameter of type string. And also want it to be a number. Thanks – Joseph Aug 29 '17 at 11:02
@Joseph change your onEditDetail(id: string) to onEditDetail(id: any) – Dheeraj Kumar Aug 29 '17 at 11:09
Do you have any idea why theres a "+" sign in +params? what's the purpose? – Joseph Aug 29 '17 at 11:11
@Joseph (+) converts string 'id' to a number – Dheeraj Kumar Aug 29 '17 at 11:13
Thanks a lot. by the way, i added a an html above. Once i click the edit button, it should get the id(index), so I would be able to edit the item through accessing the ID. Is my code correct? – Joseph Aug 29 '17 at 11:17
"user". If this is a model, you need to pass that model to your component with OnClick event as a parameter and in componenet you can access user.id. another way to do it is to pass $event with Onclick event and access it in component. If answer has helped please mark it as correct. – Dheeraj Kumar Aug 29 '17 at 11:22
The problem is that i don't have a user.id. I want to get the index but my user-detail.component.html is not an array but it's an object – Joseph Aug 29 '17 at 11:46
Check this out - https://angular.io/guide/user-input. How to get data from html in component – Dheeraj Kumar Aug 29 '17 at 11:48
I know how to do it but i want to pass the index to my edit button just like this "onEditDetail(index)" – Joseph Aug 29 '17 at 12:00
To pass index to component, you have to make it available to html and then pass it – Dheeraj Kumar Aug 29 '17 at 12:12
Yes, you're right. But I dont' have an array as you can see above because this is not a list of items but only one item is shown – Joseph Aug 29 '17 at 12:27
yea. So you aren't showing ID on html, then how do you expect it to get in component. you can get firstname, lastname etc. – Dheeraj Kumar Aug 30 '17 at 04:36
So how can pass it? – Joseph Aug 30 '17 at 04:43
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/153188/discussion-between-dheeraj-kumar-and-joseph). – Dheeraj Kumar Aug 30 '17 at 04:45

score 0 · Answer 2 · answered Aug 29 '17 at 09:54

0

You can do that

ngOnInit() {
  this.route.params
    .subscribe((params: Params) => {
      this.id = +params['id'];
      this.user = this.userService.getUser(this.id);

      // Your method call
      this.onEditDetail(this.id);
    });
}

onEditDetail(id: string) {
  console.log(id);
}

answered Aug 29 '17 at 09:54

L.Wonbae

131
8

It says Argument of type number is not assignable to parameter of type string. And also want it to be a number. Thanks – Joseph Aug 29 '17 at 11:02

score 0 · Answer 3 · answered Aug 29 '17 at 09:55

ngOnInit() {
  this.route.params
    .subscribe((params: Params) => {
      this.id = +params['id'];
      this.onEditDetail(this.id); //call onEditDetails and pass id to it.
      this.user = this.userService.getUser(this.id);
    });
}

onEditDetail(id: any) {
  console.log(id);
}

Pass ID(Index) to onEditDetail() Parameters

3 Answers3