-1

I develop application for Portal, but when i create new role, the role is created but the problem is that the added element is not displayed, it must refresh the browser to display this new element !!!, what do I do to display the added element directly in my table , and how to develop the other methods (put and delete) and thank's (i develop this application with angular 5) thid my code .html: 

<form #personForm="ngForm" (ngSubmit)="onSubmit(personForm.value)">
  <input name="RoleName" [(ngModel)]="RoleName">  
  <button type="submit">Save</button>
</form>

and this my code .ts:

export interface Role {
  RoleName: string;
}

@Component({
  selector: 'app-role',
  templateUrl: './role.component.html',
  styleUrls: ['./role.component.css']
})
export class RoleComponent implements OnInit, AfterViewInit {
  private roles: any;
  constructor(private _roleService: RoleService, private http: HttpClient) { }

  onSubmit(role: Role) {
    return this.http.post('http://172.16.47.34:8282/MonProject.webservices/api/Roles', role).subscribe(status => console.log(JSON.stringify(status)));
  }

  async ngOnInit() {
    this.roles = await this._roleService.getRoles();
  }
  ngAfterViewInit(): void {
    $('#example-table').DataTable({
      pageLength: 10,
    });
  }
}
adem
  • 31
  • 1
  • 1
  • 8
  • You can refresh the particular component ,after you have fetched the data – Shubham Dixit Sep 27 '18 at 09:40
  • @JaiDixit, thank's for your answer, but I want the item displayed without the refresh, I hope you understand my idea, because I am a beginner in English – adem Sep 27 '18 at 09:44
  • Component refresh is not same as page refresh.-This post might be helpful-https://stackoverflow.com/a/47814052/7849549 – Shubham Dixit Sep 27 '18 at 09:46
  • @JaiDixit, I mean I want refresh just table without refresh all the page – adem Sep 27 '18 at 10:06

1 Answers1

0

If your post is successful, then update your data table with the newly added role.

You can achieve this by adding this logic inside the subscribe function.

Put and delete should follow the same concept. If the response shows that the request was successfully processed, then (in the subscribe) you can modify your data table.

Two things I noticed:

  1. Try to avoid using jQuery with Angular. These two are not the best together. You can get a reference for the data table with ViewChild.

  2. Using async/await with ngOnInit is a bad practice.

gr4viton
  • 1,434
  • 1
  • 8
  • 21
  • hi @Balázs Takács, thank's for your answer, i have a question, how i use method put and delete, is the same principle of method post ? – adem Sep 27 '18 at 10:04
  • Under sample principle I mean if your request was successful, then in your subscribe method you can modify the data table. – gr4viton Sep 27 '18 at 10:52