CODEWITHSUNDEEP
angulartypescript
Alezco05
Alezco05

Reputation: 483

Re-subscribe to an Angular request

I have a parent component that is a form, which when I add a user should show it on the right of the screen in a sidebar that is a child component. The problem is that when I insert in the database, it does not update the list of users. It only gets updated when I reload the page. So I'm trying to rerun the http request to get the users back but I doesn't refresh the view of the child.

This is my HTML of the parent component:

<form [formGroup]="form">
   ........ 
  <button (click)="OnSubmit()" >Add User</button>
  </form>
  <app-sidebar [users]="users"></app-sidebar>

This is my TS where there is the onSubmit function where I add the users:

users = [];
constructor(private userService:UserService) { }
ngOnInit(): void {
  this.getUsers();
}

getUsers(){
this.userService.getUsers().subscribe(
    (resp: any) => this.users = resp,
    error => console.log(error)
  )}
OnSubmit() {
 this.userService.createUser(this.data).subscribe(
    () => this.getUsers(),
    (error) => console.log(error)
 );

And this is the HTML of my child component

<nav id="sidebar">
        <div class="sidebar-header">
            <h3>Usre</h3>
        </div>
        <ul *ngFor="let user of users">
            <li>ID {{user.id}}</li>
            <li>Name: {{user.name}}</li>
        </ul>
    </nav>

And this is the TS

export class SidebarComponent implements OnInit {
 @Input() users;
 constructor() { }
 ngOnInit(): void {
   }
}

Here I also leave the service that I do to obtain the users

getUsers(){
    return this.http.get(`localhost:8000/users`);
  }

Upvotes: 1

Views: 107

Answers (2)

StepUp
StepUp

Reputation: 38094

It looks like after adding an user you are not sending updated list of users to child component. You can create @Input() property in child component and send data from the parent component:

child.component.ts:

export class ChildComponent {
  //@Input() count: number;

  _count: number = 0;

  @Input()
  set count(count: number) {
    this._count = count;
    console.log(count);
  }
}

parent.html:

<app-child [count]="counter"></app-child>

parent.ts:

export class ParentComponent {
  title = 'Component Interaction';
  counter = 5;

  increment() {
    this.counter++;
  }

  decrement() {
    this.counter--;
  }
}

The full stackblitz example can be seen here

Upvotes: 1

JSmith
JSmith

Reputation: 4808

I would try something like this:

myUserService.service.ts

...

users:User[] = [];

...
getUsers(){
 return (this.users)
}

addUser(user:User){
  this.users.push(user)
}
...

submission

onSubmit(){
   //POST request is here
   this.userService.createUser(this.data).subscribe(
      (resp) => {
        //if POST request i susccesfull then add a user to you global users variable
        if (resp.status === 'success')
           myUserService.addUser(resp.user)
        console.log(resp)
      },
      (error) => console.log(error)
   );
}

child Component HTML

<nav id="sidebar">
  <div class="sidebar-header">
    <h3>Usre</h3>
  </div>
  <ul *ngFor="let user of users">
    <li>ID {{user.id}}</li>
    <li>Name: {{user.name}}</li>
  </ul>
</nav>

child Component.ts

...

users:User[]

constructor(private myUserService:myUserService){
  this.users = myUserService.getUsers()
}

...

please tell me if that's not clear

Upvotes: 0

Related Questions