How to implement Angular view?

Question

Angular

Hello!
In general, there is a project, the essence is that when I select a person in the left column, then full information about him should appear in the right one!
Implemented, but even I do not understand what does not work!
Could you tell me if it's not right, or how to implement it correctly!
my project on github: https://github.com/Felino7727/incode7727
partly where I see the problem!

<div class="wrapper">
  <div class="middle">
    <div class="container">
      <main class="content">
        <input id="first_name" class="validate" [(ngModel)]="Search">
        <app-people-info
          [member_info]="y" *ngFor="let y of fulls "></app-people-info>
      </main>
    </div>
    <aside class="left-sidebar">
      <app-list-people
        onclick="OnClick(x)"
        [member]="x" *ngFor="let x of fulls"
      ></app-list-people>
    </aside>
  </div>
</div>

export class AppComponent{

  @Input()
  public fulls: FullModels[]=[];
  public data1: any;
  public full:FullModel[]=[];
  Search = '';

  constructor(private peopleService: PeopleService) {
  }
  OnClick(a:FullModel){
      this.full[0].lastName=a.lastName;
      this.full[0].avatar=a.avatar;
      this.full[0].company=a.company;
      this.full[0].title=a.title;
      this.full[0].email=a.email;
      this.full[0].phone=a.phone;
      this.full[0].street=a.street;
      this.full[0].city=a.city;
      this.full[0].zipCode=a.zipCode;
      this.full[0].country=a.country;
  }
  ngOnInit() {
    this.peopleService.getPeople().subscribe(data => {
      this.data1 = data;

      for (let i in this.data1) {
        this.fulls[i] =
          new FullModel(
            this.data1[i].general.firstName,
            this.data1[i].general.lastName,
            this.data1[i].general.avatar,
            this.data1[i].job.company,
            this.data1[i].job.title,
            this.data1[i].contact.email,
            this.data1[i].contact.phone,
            this.data1[i].address.street,
            this.data1[i].address.city,
            this.data1[i].address.zipCode,
            this.data1[i].address.country
          )
        ;
      }
    });
  }
}

Answer 1

Try this for example:
html:

<div col-md-3>
 <div class="list-group" >
  <div class="media" *ngFor="let people of peoples">
    <a (click)="onSelectedPeople(people.people_id)">
      <h4 class=" media-heading list-group-item-heading"> {{people.firstName}} </h4>
     </a>
   </div>
 </div> 
</div> 

<div col-md-9 >
<div *ngIf="selectedPeople">
  <div class="form-group form-black">
      <label class="control-label">Имя</label>
       <input type="text" class="form-control" [(ngModel)]='selectedPeople.firstName' name="firstName" disabled>
    </div>
  </div>
  <div class="form-group form-black">
      <label class="control-label">Фамилия</label>
       <input type="text" class="form-control" [(ngModel)]='selectedPeople.lastName' name="lastName" disabled>
    </div>
  </div>
  <div class="form-group form-black">
      <label class="control-label">Компания</label>
       <input type="text" class="form-control" [(ngModel)]='selectedPeople.company' name="company" disabled>
    </div>
  </div>
....
</div>
</div>

ts:

selectedPeople = null;

onSelectedPeople(peopleId) {
    this.selectedPeople = this.peoples.find(element => {
      return element.people_id === peopleId
    });
 }