CODEWITHSUNDEEP
angularservicecomponents
TheBestAngularDeveloper
TheBestAngularDeveloper

Reputation: 189

How can I send object to unrelated component through a service in Angular 6?

So I'm new to Angular and I'm trying to send an object from component1 to component2 using a service. When I log the result to the console in component2, it doesn't give me the updated value of the object and it's probably because the service is reinitialized in the second component. Can you help on this issue?

This is my code

 @Injectable({
  providedIn: 'root'
})
export class CodeServiceService {
  codeInfo:Code={
    name:"",
    text:"",
    type:0
  };
  getCode(){
    console.log(this.codeInfo);
    return this.codeInfo;
  }
  setCode(result:Code){
    this.codeInfo=result;
  }
}

Component1

@Component({
  selector: 'app-newscan',
  templateUrl: './newscan.component.html',
  styleUrls: ['./newscan.component.css'],
  providers:[CodeServiceService]
})
export class NewscanComponent implements OnInit {
scannedCode:Code={
    name:"name",
    text:"text",
    type:1
  };

  constructor(private service:CodeServiceService){}
saveInfo(){
    this.service.setCode(this.scannedCode);
  }
}

Component2

@Component({
  selector: 'app-scan-list',
  templateUrl: './scan-list.component.html',
  styleUrls: ['./scan-list.component.css'],
  providers:[CodeServiceService]
})

export class ScanListComponent implements OnInit {

  newcode:Code={
    name:"",
    text:"",
    type:0
  };
constructor(private service:CodeServiceService){
  }
  ngOnInit(){

    this.newcode=this.service.getCode();
console.log(this.newcode);
  }
}

Upvotes: 2

Views: 336

Answers (2)

Yash Rami
Yash Rami

Reputation: 2327

you can use rxjs subject for that here is the example.

1./ Service

 import { Observable, Subject } from 'rxjs';
 @Injectable({
    providedIn: 'root'
 })
 export class CodeServiceService {
 codeInfo:Code={
    name:"",
    text:"",
    type:0
 };
 getCode() : Observable<any> {
    return this.subject.asObservable();
}
setCode(result:Code){
   this.subject.next({ text: code });
}

}

2./ component1

 export class NewscanComponent implements OnInit {
 scannedCode:Code={
   name:"name",
   text:"text",
 type:1
 };

 constructor(private service:CodeServiceService){}
 saveInfo(){
   this.service.setCode(this.scannedCode);
 }
}

3./ component2

export class ScanListComponent implements OnInit {
 newcode:Code={
   name:"",
   text:"",
   type:0
};
constructor(private service:CodeServiceService){
}
ngOnInit(){
 this.newcode=this.service.getCode().subscribe(response => {
        console.log(response); // here you can get updated data from another component  
 });
 }
}

You can implement this method for sending data to a component which doesn't have a parent-child relationship.

Upvotes: 0

Shashank Vivek
Shashank Vivek

Reputation: 17504

It's because you are using

 providers:[CodeServiceService]

in both components, so it's creating new instance of service for both components.

use providers:[CodeServiceService] in app.module.ts

@NgModule({
   // ..... imports
    providers:[CodeServiceService]
   //..
})

In Angular 6:

you can use below code in service.ts, rather than adding in app.module.ts

@Injectable({
  providedIn: 'root',
})

Upvotes: 1

Related Questions