title: sending dynamic data from one route to other
body: <p>I want to send data from students/my-students route to students/student-profile/:id 
  both belong to different module which is child module of student-post-login module.</p>
  
  <p><strong>In my-students.html</strong></p>
  
  <pre><code>&lt;div *ngFor="student of students"&gt;
  &lt;a (click)="goToStudentProfile(student)"&gt; student name &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>my-students.ts</strong></p>
  
  <p>goToStudentProfile(student)
  {</p>
  
  <pre><code>  let studentData = { "firstName": student.firstname,
      "phone": student.phone,
      "email": student.email,
      "birthdate": student.birth_date
      }
  
    this.studentsService.studentBasicInfo = []
    this.studentsService.studentBasicInfo.push(studentData );
  this.router.navigate(['students/student-profile/student.student_id'])
  
  }
  </code></pre>
  
  <p>In <strong>studentsService</strong> I have studentBasicInfo public field declared as </p>
  
  <pre><code>studentBasicInfo = [];
  </code></pre>
  
  <p><strong>student-profile component:</strong></p>
  
  <pre><code>ngOnInit()
  {
   console.log("studentBasicInfo", this.studentsService.studentBasicInfo) 
  }
  
  //Output: studentBasicInfo  undefined
  </code></pre>
  
  <p>I tried this with behaviorSubject as well but may be both components are from different module so that is also not working.</p>
  
  <p>Any ideas that how I can fix this?</p>
  
  <p><strong>UPDATE</strong>
  <strong>I have also tried:</strong></p>
  
  <p>my-students.component.ts</p>
  
  <pre><code>this.studentsService.setData(studentsData)
  </code></pre>
  
  <p>service:</p>
  
  <pre><code>studentData = new BehaviorSubject&lt;any&gt;(null)
  studentData$ = this.studentData.asObservable();
  setData(data)
  {
      this.studentData.next(data)
  }
  </code></pre>
  
  <p>student-profile.component.ts</p>
  
  <pre><code>ngOnInit(){
  
  this.studentService.studentData$.subscribe(
  
  data=&gt;
  {
    console.log("subscribed",data)
  })
  }
  
  //Output subscribed
  </code></pre>
  
  <p>Explained my scenario:
  <a href="https://stackblitz.com/edit/angular-b8etio?file=src%2Fapp%2Fapp.component.ts" rel="nofollow noreferrer">stackblits</a>
  But unfortunately it is not working due to dependency issue.</p>
  
  <p><strong>UPDATE:</strong>
  This part of answer from <strong>Aniket avhad</strong> solved my problem:</p>
  
  <blockquote>
    <p>In order two share a service between multiple components, you should
    provide the service at a level higher and not add the service to the
    providers of both components.</p>
  </blockquote>