Dynamically change the data in a component angular 6

Question

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.

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.

Component 1 Html

<div class="portion1 clearfix">
                        <ul class="nav nav-pills second-list" role="tablist">
                           <li class="nav-item" *ngFor="let leads of result">
                              <a class="nav-link active" data-toggle="pill" href="#detail1" (click)="getleadmessages(leads.id)">
                                 <div class="mail-box clearfix">
                                    <div class="photo-box clearfix">
                                       <img src="assets/assetz/user/maillist/img/mail-user1.jpg" alt="icon">
                                    </div>
                                    <div class="des-box">
                                       <p class="p1">{{leads.name}}</p>
                                       <p class="p2">{{leads.email}}</p>
                                       <p class="p3">{{leads.phone}}</p>
                                       <p class="date-time">{{leads.send_on}}</p>
                                    </div>
                                 </div>
                              </a>
                           </li>
                        </ul>
                     </div>

Component 1 ts

// Get leads oa a specfic user
  public getLeadsByUser()
  {
    this.Jarwis.getLeadsByUser({user:this.token}).subscribe(
      data => this.handleResponse(data),
      error => 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);
  }

service for transfer data from component 1 to component 2

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);
  }
}

component 2 html

<div id="detail1" class="tab-pane active clearfix">
    <div class="mail-box clearfix">
       <div class="photo-box clearfix">
          <img src="assets/assetz/user/maillist/img/mail-user1.jpg" alt="icon">
       </div>
       <div class="des-box">
          <p class="p1">David James</p>
          <p class="date-time">20-5-2018/  <span>2:45</span></p>
       </div>
    </div>
    <div class="detail-mail-container">
       <p class="detailed-mail"> on the Internet.<br />Thanks<br />David James</p>
       <div class="textarea-wrap">
          <textarea class="reply-box" id="reply-box"></textarea>
          <label for="#reply-box">Click here to</label>
       </div>
    </div>
 </div>
</div>

Component 2 ts

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 => this.result = data); 
  }

}

I think this is too broad to write up as an answer, but you should take a look at part 3 of the Angular Tour of Heroes tutorial (https://angular.io/tutorial/toh-pt3), it covers this exact situation - displaying a list, then displaying detail about a single item when selected from list — Vlad274, Apr 06 '19 at 12:42

score 0 · Answer 1 · answered Apr 06 '19 at 12:37

0

When you have

<p>{{article}}</p>
<button (onclick)=loadArticle()>Load</button>

Then you just assign content to article and you are done.

Eg in component:

article:string;

loadArticle(){
   this.article="some content";

}

answered Apr 06 '19 at 12:37

Antoniossss

31,590
6
57
99

i didnt get that properly – sooraj s pillai Apr 06 '19 at 12:40

score 0 · Answer 2 · answered Apr 06 '19 at 12:51

A parent component can set a value to its child component directly. However, I see you have 2 components that are siblings. So shared service would be the best approach.

Angular 2 Sibling Component Communication

https://medium.com/@pandukamuditha/angular-5-share-data-between-sibling-components-using-eventemitter-8ebb49b64a0a

Dynamically change the data in a component angular 6

2 Answers2