Earphone

*{
  margin: 0%;
  padding: 0%;
}

import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';
import { LayoutComponent } from '../shared/layout/layout.component';

export const routes: Routes = [
  { path: '', redirectTo: 'adminca', pathMatch: 'full' },
  { path: 'adminca',   component: LayoutComponent}
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules });

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';
import { routing } from './routing.module';
import { AuthModule } from './modules/auth/auth.module';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, RouterModule, SharedModule, routing, AuthModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

import { NgModule, ModuleWithProviders, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { routing } from './layout.routes';
import { StartPageComponent } from '../../modules/start-page/start-page.component';
import { SystemUsersComponent } from '../../modules/system-users/system-users.component';
import { LayoutComponent } from './layout.component';

@NgModule({
  declarations: [StartPageComponent, SystemUsersComponent, LayoutComponent],
  imports: [CommonModule,  RouterModule, routing],
  providers : [],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class LayoutModule {
    static forRoot(): ModuleWithProviders {
        return {
          ngModule: LayoutModule,
          providers: []
        };
    }
 }

import { Routes, RouterModule }  from '@angular/router';

import { ModuleWithProviders } from '@angular/core';

import { StartPageComponent } from '../../modules/start-page/start-page.component';
import { SystemUsersComponent } from '../../modules/system-users/system-users.component';
import { LayoutComponent } from './layout.component';

export const routes: Routes = [
  {
    path: 'adminca',
    component: LayoutComponent,
    children: [
      { path: '', redirectTo: 'start-page', pathMatch: 'full' },
      { path: 'start-page', component: StartPageComponent },
      { path: 'system-users', component: SystemUsersComponent }
    ]
  }
];

export const routing: ModuleWithProviders = RouterModule.forChild(routes);

<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>

selectedPeople = null;

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