title: Dynamically change the data in a component angular 6
body: <p>I'm new to angular so i'm not much familiar with the angular functions. Currently i'm facing a situation ie, i want to change data of a component while clicking a function from another component.</p>
  
  <p><a href="https://i.stack.imgur.com/2h421.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2h421.png" alt="enter image description here"></a></p>
  
  <p>Here while clicking the tab in component 1 i want to change the change the data in component 2.This is what i tried till now.</p>
  
  <p>Component 1 Html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="portion1 clearfix"&gt;
                          &lt;ul class="nav nav-pills second-list" role="tablist"&gt;
                             &lt;li class="nav-item" *ngFor="let leads of result"&gt;
                                &lt;a class="nav-link active" data-toggle="pill" href="#detail1" (click)="getleadmessages(leads.id)"&gt;
                                   &lt;div class="mail-box clearfix"&gt;
                                      &lt;div class="photo-box clearfix"&gt;
                                         &lt;img src="assets/assetz/user/maillist/img/mail-user1.jpg" alt="icon"&gt;
                                      &lt;/div&gt;
                                      &lt;div class="des-box"&gt;
                                         &lt;p class="p1"&gt;{{leads.name}}&lt;/p&gt;
                                         &lt;p class="p2"&gt;{{leads.email}}&lt;/p&gt;
                                         &lt;p class="p3"&gt;{{leads.phone}}&lt;/p&gt;
                                         &lt;p class="date-time"&gt;{{leads.send_on}}&lt;/p&gt;
                                      &lt;/div&gt;
                                   &lt;/div&gt;
                                &lt;/a&gt;
                             &lt;/li&gt;
                          &lt;/ul&gt;
                       &lt;/div&gt;
  </code></pre>
  
  <p>Component 1 ts</p>
  
  <pre class="lang-js prettyprint-override"><code>// Get leads oa a specfic user
    public getLeadsByUser()
    {
      this.Jarwis.getLeadsByUser({user:this.token}).subscribe(
        data =&gt; this.handleResponse(data),
        error =&gt; this.handleError(error)
      );
    }
    // Handle response from api
    handleResponse(data){
      if(data.status == '1'){
        this.result = data.result;
      }
      else{
        this.msg = data.msg;
      }
  
    }// Handle error response from api
    handleError(error){
      this.error = error.error.errors;
      console.log(this.error);
    }
    getleadmessages(mailid){
      this.Userdatatransfer.setselectedmailid(mailid);
    }
  </code></pre>
  
  <p>service for transfer data from component 1 to component 2</p>
  
  <pre class="lang-js prettyprint-override"><code>export class UserdatatransferService {
  
    public mailid = new BehaviorSubject('nomailid');
    selectedmailid = this.mailid.asObservable();
  
    constructor() { }
  
    setselectedmailid(data){ // set mailid using subject
      this.mailid.next(data); alert(data);
    }
  }
  </code></pre>
  
  <p>component 2 html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="detail1" class="tab-pane active clearfix"&gt;
      &lt;div class="mail-box clearfix"&gt;
         &lt;div class="photo-box clearfix"&gt;
            &lt;img src="assets/assetz/user/maillist/img/mail-user1.jpg" alt="icon"&gt;
         &lt;/div&gt;
         &lt;div class="des-box"&gt;
            &lt;p class="p1"&gt;David James&lt;/p&gt;
            &lt;p class="date-time"&gt;20-5-2018/  &lt;span&gt;2:45&lt;/span&gt;&lt;/p&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="detail-mail-container"&gt;
         &lt;p class="detailed-mail"&gt; on the Internet.&lt;br /&gt;Thanks&lt;br /&gt;David James&lt;/p&gt;
         &lt;div class="textarea-wrap"&gt;
            &lt;textarea class="reply-box" id="reply-box"&gt;&lt;/textarea&gt;
            &lt;label for="#reply-box"&gt;Click here to&lt;/label&gt;
         &lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Component 2 ts</p>
  
  <pre class="lang-js prettyprint-override"><code>export class MailboxmessagesComponent implements OnInit {
  
      constructor(private Jarwis:JarwisService,
        private router : Router,
        private http: HttpClient,
        private  _router : Router,
        private Userdatatransfer: UserdatatransferService) { }
      public result = null;
  
    ngOnInit() {
      this.Userdatatransfer.selectedmailid.subscribe(data =&gt; this.result = data); 
    }
  
  }
  </code></pre>