Data flow with child and parent class maintenance in angular2

Question

I have persons parent class and it has multiple person child class with some properties. In the home page I have a link to open the person page. When I click the link I could open the persons page with one person information by default. User can add or remove the person. When I submit the page it will redirect to home page by saving the array of data.

My problem here is, When I submit and I have added person details in it and if I click the person page again from the home page I should regain the original details by default. By I can see the same page when I have clicked before the data entry. Means every data I have added it re-initialized. I have declared the things with "static" also. Please look at the code below.

HTML code below..

 <div id="personsDetails">
     <person-directive *ngFor="let person of persons; let idx = index" (remove) = "removePerson(idx)">
     </person-directive>
 </div>

persons component is below...

@Component({
   selector: 'personinvolved',
   templateUrl: 'app/modules/person/personinvolved.template.html',    
   directives: [PersonDirective]
})

export class PersonInvolvedComponent {
private mainArray = new Array();

static persons: Array<PersonDirective> = [];

constructor( private router: Router, private _globalService:GlobalService, private el: ElementRef) {    
    if(PersonInvolvedComponent.persons.length == 0) {
        PersonInvolvedComponent.persons.push(new PersonDirective());
    }
}
get persons(){
    return PersonInvolvedComponent.persons;
}
addPerson() {
    PersonInvolvedComponent.persons.push(new PersonDirective());
}

removePerson(index) {
    PersonInvolvedComponent.persons.splice(index,1);
}

onFormSubmit(event) {
    $(this.el.nativeElement).find("person-directive").each((i,val) => {
        this.mainArray[i] = new Array(10);
        this.mainArray[i][0] = $(val).find("#raceSelect").val();
        this.mainArray[i][1] = $(val).find("#genderSelect").val();
        this.mainArray[i][2] = $(val).find("#ageSelect").val();
        this.mainArray[i][3] = $(val).find("#heightSelect").val();
        this.mainArray[i][4] = $(val).find("#buildSelect").val();
        this.mainArray[i][5] = $(val).find("#eyeColorSelect").val();
        this.mainArray[i][6] = $(val).find("#hairColorSelect").val();
        this.mainArray[i][7] = $(val).find("#addInfoSelect").val();
        this.mainArray[i][8] = $(val).find("#nameSelect").val();
        this.mainArray[i][9] = $(val).find("#aliasNameSelect").val();
    });
    this._globalService.setPageData(this.mainArray,'person');
    this.router.navigate(['step1']);
}
}

So by clicking submit all the data entered in person is saved in service and redirected to step1 ie home page. When I click again person link in home page, person page becomes default without having any previously entered data. Can someone please suggest me how can I maintain it back until I submit from home page.

score 2 · Answer 1 · answered Oct 24 '16 at 05:30

2

If you move the data to a shared service that is provided at the root scope (AppModule) or some other component that is not removed from the DOM when navigating, the data stays available.

@Injectable()
export class MyService {
  // data properties here
  private mainArray = new Array();

  static persons: Array<PersonDirective> = [];
}

@NgModule({
  providers: [BrowserModule, MyService, /* other providers */],
  ...
})
export class AppModule {}

export class PersonInvolvedComponent {    
    constructor(private myService:MyService private router: Router, private 
_globalService:GlobalService, private el: ElementRef) {
    if(this.myService.persons.length == 0) {
        this.myService.persons.push(new PersonDirective());
    }
}
get persons(){
    return this.myService.persons;
}
addPerson() {
    this.myService.persons.push(new PersonDirective());
}

removePerson(index) {
    this.myService.persons.splice(index,1);
}

onFormSubmit(event) {
    $(this.el.nativeElement).find("person-directive").each((i,val) => {
        this.myService.mainArray[i] = new Array(10);
        this.myService.mainArray[i][0] = $(val).find("#raceSelect").val();
        this.myService.mainArray[i][1] = $(val).find("#genderSelect").val();
        this.myService.mainArray[i][2] = $(val).find("#ageSelect").val();
        this.myService.mainArray[i][3] = $(val).find("#heightSelect").val();
        this.myService.mainArray[i][4] = $(val).find("#buildSelect").val();
        this.myService.mainArray[i][5] = $(val).find("#eyeColorSelect").val();
        this.myService.mainArray[i][6] = $(val).find("#hairColorSelect").val();
        this.myService.mainArray[i][7] = $(val).find("#addInfoSelect").val();
        this.myService.mainArray[i][8] = $(val).find("#nameSelect").val();
        this.myService.mainArray[i][9] = $(val).find("#aliasNameSelect").val();
    });
    this._globalService.setPageData(this.myService.mainArray,'person');
    this.router.navigate(['step1']);
}

answered Oct 24 '16 at 05:30

Günter Zöchbauer

623,577
216
2,003
1,567

I have added in service component and imported personDirective. But I am getting error "Can't resolve all parameters for PersonDirective:?" – raj m Oct 24 '16 at 06:52
I don't understand what you try to accomplish with `personDirective` but creating components or directives with `new` (`new PersonDirective()`) is pointless. Angular needs to create these instances itself. – Günter Zöchbauer Oct 24 '16 at 06:54
Actually its a child class of persons. – raj m Oct 24 '16 at 06:58
That error was the problem with injector in my service. So I have created separate service for this. I am not getting any error now. But data is not staying. Its intializing the new page – raj m Oct 24 '16 at 07:14
Where did you add the service to `providers: [...]`? – Günter Zöchbauer Oct 24 '16 at 07:23
BTW all those `this.mainArray[i][0] = $(val).find("#raceSelect").val();` look pretty awful. You shouldn't use and shouldn't need jQuery with Angular2 for such basic stuff (except perhaps if you want or need to use jQuery UI components). I'd suggest you check the tutorials in https://angular.io/ – Günter Zöchbauer Oct 24 '16 at 07:25
Jquery stuffs I will remove. I have added providers in app.module.ts – raj m Oct 24 '16 at 07:57
Hard to tell what could still be wrong. Can you reproduce in a Plunker? (Plunker provides a ready-to-use Angular2 template under the "New" button) – Günter Zöchbauer Oct 24 '16 at 07:59
Sure.. Give me sometime. – raj m Oct 24 '16 at 08:13
,Can you please tell me how can I access child component data here, so that I can remove jquery stuffs there. it has multiple child class with multiple data – raj m Oct 26 '16 at 08:30
http://stackoverflow.com/questions/32693061/angular-2-typescript-get-hold-of-an-element-in-the-template/35209681#35209681 should provide what you need. Doesn't work for dynamically added HTML though (like `[innerHTML]="..."` or `element.appendChild(...)`). – Günter Zöchbauer Oct 26 '16 at 11:54

Data flow with child and parent class maintenance in angular2

1 Answers1