Angular page auto refresh

Question

I have a little problem in my angular application. On the first page I have a table with a list of all the employees and a "Create New Employee" button, which opens me a new form. After form submitting, a request is sent to the database and I return to the start page. New rows appears only when I click refresh button. Please, tell me, how can I reload data automatically?. Maybe, I do something wrong.

Here is a part of my table.component.html:

<tr *ngFor="let item of getAllEmployees(); let i = index">
            <td>{{i+1}}</td>
            <td>{{item.firstName}}</td>
            <td>{{item.lastName}}</td>
            <td [ngSwitch] = "item.isActive">
                <span *ngSwitchCase ="1">Yes</span>
                <span *ngSwitchDefault>No</span>
            </td>
            <td>{{item.depName}}</td>
     --------------------------------

Here is a part of my table.component.ts:

export class TableComponent{

    constructor(private model: Model){    
    }

    getAllEmployees(): Employee[]{ 
       return this.model.getAllEmployees();
    }

Here is my Model:

@Injectable()
export class Model{
    private employees: Employee[] = new Array<Employee>();
    private departments: Department[] = new Array<Department>();


    constructor(private dataSource: DataSource){
        this.dataSource.getEmployeesData().subscribe(data => this.employees = data);
        this.dataSource.getDepsData().subscribe(data => this.departments = data);
    }

    getAllEmployees(): Employee[]{
        return this.employees;
    }

And, finally, a request:

export const URL = new InjectionToken("url");

@Injectable() export class DataSource{

constructor(private http: Http, @Inject(URL) private url: string){

}

getEmployeesData(): Observable<Employee[]>{
    return this.sendRequest(RequestMethod.Get, `${this.url}employeeslist`);
}

And also my Form Component:

export class FormComponent{
    employee: Employee = new Employee(); 
    constructor(private model:Model, private activeRoute: ActivatedRoute, 
                private router: Router){

        this.editing = activeRoute.snapshot.params["mode"] == "edit";
        let id = activeRoute.snapshot.params["id"];
        if(id != null){
            Object.assign(this.employee, this.model.getEmployee(id) || new Employee());
        }                
    }
    editing: boolean = false;
    submitForm(form: NgForm) {
        if (form.valid) {
            this.model.saveEmployee(this.employee);
            this.router.navigateByUrl('/');
        }
    }
    resetForm() {
        this.employee = new Employee();
    }
    getAllDeps(): Department[]{
        return this.model.getAllDeps();
    }
}

Thank you!

Jacobo de la Rosa Jacobo de la Rosa · Accepted Answer · 2018-02-05T09:57:11

Probably your error is here:

    export class FormComponent{
employee: Employee = new Employee(); 
constructor(private model:Model, private activeRoute: ActivatedRoute, 
            private router: Router){

    this.editing = activeRoute.snapshot.params["mode"] == "edit";
    let id = activeRoute.snapshot.params["id"];
    if(id != null){
        Object.assign(this.employee, this.model.getEmployee(id) || new Employee());
    }                
}
editing: boolean = false;
submitForm(form: NgForm) {
    if (form.valid) {
        this.model.saveEmployee(this.employee);
        this.router.navigateByUrl('/');
    }
}
resetForm() {
    this.employee = new Employee();
}
getAllDeps(): Department[]{
    return this.model.getAllDeps();
}

When you receive a valid form, you save the employee and then redirect to your homepage or index route with this.router.navigateByUrl('/'); Probably you should don't do that and call your getAllEmployees method again to retrieve all the records again

Angular page auto refresh

1 Answers