CODEWITHSUNDEEP
angulartypescriptangular2-forms
Sukumar MS
Sukumar MS

Reputation: 748

how to pass an object from one component to another to build a data model in angular2?

my application is having two forms which is coming from two components.In the first form i am taking username and in the second form i am taking user address and contact info. how can i build an object as shown below.

thanks in advance

I want to build an object like this

{
  "Username": "riyaz",
  "addressline1": "happy home hostel",
  "addressline2": "yellareddy guda",
  "phone": "999999999",
  "displayname": "ragav Riyaz",
  "email": "[email protected]"
}

Here is my code

username.comonent.ts

import { Component } from 'angular2/core';
 import { Router } from 'angular2/router';

    @Component({
      template:`
      <br>
    <div class="container">
      <div class="row">
        <div class="input-group  input-group-lg">
        <input  type="text" [(ngModel)]="restName" class="form-control" placeholder="Restaurant Name" >
    <span class="input-group-btn">
       <input  type="submit" class="btn" value="Continue" (click)="UserName(username); username=''" > 
        </span>
          </div>
       </div>
    </div>
    `,
     directives:[NameComponent]

    })

    export class NameComponent{

    constructor(private router:Router){}
    public user = {};

    RestName(name){
       var name = name.trim();
       var res= name.replace(/[^a-zA-Z]/g,'');
       var username = res.toLowerCase();

         this.user={
                title: username ,
                completed: false
            };
         console.log('**>'+JSON.stringify(this.user)); //single user name comes here

         this.router.navigate(['Details']);
       }
    }

details.component.ts

        import { Component } from 'angular2/core';
        import { Router } from 'angular2/router';
        import { NameComponent } from './rest-name.component';

        @Component({
          templateUrl:`
    <form #myform="ngForm" (ngSubmit)="Address()">
    <div>
      <button  class="btn">Continue
     </button>
          </div>
        <div class="input-group">
        <input type="text" ngControl="address1" [(ngModel)]="userDetails.address1" class="form-control">
         </div>
        <div class="input-group">
        <input type="text" ngControl="displayname" [(ngModel)]="userDetails.address1" class="form-control">
         </div>
        </div>
        <div class="input-group">
        <input type="text" ngControl="email" [(ngModel)]="userDetails.email" class="form-control">
         </div>
        </div>
        <div class="input-group">
        <input type="text" ngControl="phone" [(ngModel)]="userDetails.phone" class="form-control">
         </div>
    </form>
        `,

          directives:[NameComponent]
        })

        export class DetailsComponent{

          constructor(private router:Router){
          this.userDetails = {address1:'',displayname:'',email:'',phone:''};
          }

        Address(){
     console.log('in the details call '+JSON.stringify(this.userDetails ));
//user details comes here.i want to pass the first component username to second component details,to build an object. 
          /*this.user= this.userDetails ;
           console.log('**>'+JSON.stringify(this.user));*/
           }
        }

Upvotes: 0

Views: 348

Answers (1)

John Baird
John Baird

Reputation: 2676

The standard method, as I understand it, is to build a service and create the object in that service, then inject it into each component where you can make a call to service.GetMyObject to retrieve it.

This way, your object is always up to date and not re-created each time you need it.

Upvotes: 1

Related Questions