Binding data to another component and use it in angular using @Input, @Output and EventEmitter

Question

I am trying to pass the one team from array of team in another component and use it. I am getting selected team in same component(team) as console.log but not getting in the another component(team-detail)

Actually, I want to use team id to fetch details of other detail about team from API. please help me around this TIA

Team.component.ts

    export class TeamsComponent implements OnInit {

  @Output() selectedTeam = new EventEmitter<any>();

  constructor(private general: GeneralService) {
  }

  teamsObject: any;
  teams: [];

  ngOnInit() {
    this.loadTeams();
  }

  loadTeams() {
    this.general.getTeams().subscribe(data => {
      this.teamsObject = data;
      this.teams = this.teamsObject.teams;
    });
  }

  onSelectTeam(team: any) {
    this.selectedTeam.emit(team);
  }

}

Team.component.html

<div class="container-fluid " >
<div class="row " >
  <div class="col-xs-12" *ngFor="let team of teams">
    <div class="card border-dark " style="width: 250px; height: 450px; margin: 10px;" (click)="onSelectTeam(team)">
      <img class="card-img-top embed-responsive" src="{{team.crestUrl}}" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">{{team.name}}</h5>
        <p class="card-text">{{team.address}}</p>
        <a href="{{team.website}}" class="btn btn-primary" target="_blank">Visit Website</a>
      </div>
    </div>
  </div>
</div>
  <app-team-detail *ngIf="selectedTeam" [team]="selectedTeam"></app-team-detail>
</div>

Team-detail component

export class TeamDetailComponent implements OnInit {

  @Input() team: any;

  constructor() {
  }

  ngOnInit() {
  }

}

team-detail template(this template only for demo purpose.)

<p>
  {{team.name}}
  {{team.crestUrl}}
  {{team.address}}
  {{team.website}}
</p>

try solution given

Pranay Rana
– Pranay Rana

2019-02-13 10:30:48 +00:00
Commented Feb 13, 2019 at 10:30 — Pranay Rana
– Pranay Rana, Commented Feb 13, 2019 at 10:30
can you create stackblitz

Chellappan வ
– Chellappan வ

2019-02-13 11:36:34 +00:00
Commented Feb 13, 2019 at 11:36 — Chellappan வ
– Chellappan வ, Commented Feb 13, 2019 at 11:36

Hardik Patel · Accepted Answer · 2019-02-13 11:16:57Z

3

“Output” identifies the events a component can fire to send information up the hierarchy to its parent. In you case you want to send information from parent component to child. So you don't need to use Output.

Team.component.ts

export class TeamsComponent implements OnInit {

  selectedTeam:any;

  constructor(private general: GeneralService) {
  }

  teamsObject: any;
  teams: [];

  ngOnInit() {
    this.loadTeams();
  }

  loadTeams() {
    this.general.getTeams().subscribe(data => {
      this.teamsObject = data;
      this.teams = this.teamsObject.teams;
    });
  }

  onSelectTeam(team: any) {
    this.selectedTeam = team;
  }

}

team.component.html

 <app-team-detail *ngIf="selectedTeam" [team]="selectedTeam"></app-team-detail>

team-details template

<p *ngIf="team">
  {{team.name}}
  {{team.crestUrl}}
  {{team.address}}
  {{team.website}}
</p>

edited Feb 13, 2019 at 11:16

answered Feb 13, 2019 at 6:32

Hardik Patel

3,9581 gold badge27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mitesh Over a year ago

Not working.. two way data binding doesn’t seems to be right there

Pranay Rana Over a year ago

there is no need of two way binding for this

Pranay Rana · Accepted Answer · 2019-02-13 10:30:34Z

1

create your property with getter and setter in you child component , rest of code remain as is

_team: any;
get team(): any {
    return this._team;
}

@Input()
set team(value: any) {
    this._team = value;
}

in child

<p *ngIf="team">
  {{team.name}}
  {{team.crestUrl}}
  {{team.address}}
  {{team.website}}
</p>

answered Feb 13, 2019 at 10:30

Pranay Rana

177k37 gold badges244 silver badges266 bronze badges

Collectives™ on Stack Overflow

Binding data to another component and use it in angular using @Input, @Output and EventEmitter

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related