@Injectable({providedIn: 'root'})
export class HeroState {
  private hero = new BehaviorSubject(null);
  constructor(private heroService: HeroService) {}
  load(id: string) {
    return this.heroService.load(id).pipe(tap(hero => this.hero.next(hero)));
  }
  save(hero: Hero) {
    return this.heroService.save(hero).pipe(tap(hero => this.hero.next(hero)));
  }
  get hero$(): Observable<Hero> {
    return this.hero.asObservable();
  }
}

@Injectable()
export class HeroController implements OnDestroy {
  private heroSubscription: Subscription;
  heroForm = this.fb.group({
    id: [],
    name: ['', Validators.required],
    power: ['', Validators.required]
  });
  constructor(private heroState: HeroState, private route: ActivatedRoute, private fb: FormBuilder) { }
  save() {
    this.heroState.save(this.heroForm.value).subscribe();
  }
  initialize() {
    this.route.paramMap.pipe(
      map(params => params.get('id')),
      switchMap(id => this.heroState.load(id)),
    ).subscribe();
    this.heroSubscription = this.heroState.selectHero().subscribe(hero => this.heroForm.reset(hero));
  }
  ngOnDestroy() {
    this.heroSubscription.unsubscribe();
  }
}

@Component({
  selector: 'hero',
  template: `
    <hero-form [form]="heroController.heroForm"></hero-form>
    <button (click)="heroController.save()">Save</button>
  `,
  providers: [HeroController]
})
export class HeroComponent {
  constructor(public heroController: HeroController) {
    this.heroController.initialize();
  }
}

export abstract class EntityState<T> {
    abstract get entities$(): Observable<T[]>; // список сущностей
    abstract get selectedId$(): Observable<string>; // id выбранного элемента
    abstract get selected$(): Observable<T>; // выбранный элемент
    abstract select(id: string); // выбрать элемент с указанным id
    abstract load(): Observable<T[]> // загрузить список
    abstract save(entity: T): Observable<T>; // сохранить сущность
}

@Injectable()
export class EntityCardController {
    isSelected$ = this.entityState.selectedId$.pipe(map(id => id !== null));
    constructor(private entityState: EntityState<any>, private snackBar: MatSnackBar) {
    }
    save(form: FormGroup) {
        this.entityState.save(form.value).subscribe({
            next: () => this.snackBar.open('Saved successfully', null, { duration: 2000 }),
            error: () => this.snackBar.open('Error occurred while saving', null, { duration: 2000 })
        })
    }
}

@Component({
    selector: 'entity-card',
    template: `
        <mat-card>
            <ng-container *ngIf="entityCardController.isSelected$ | async; else notSelected">
                <mat-card-title>
                    <ng-content select=".header"></ng-content>
                </mat-card-title>
                <mat-card-content>
                    <ng-content></ng-content>
                </mat-card-content>
                <mat-card-actions>
                    <button mat-button (click)="entityCardController.save(entityFormController.entityForm)">SAVE</button>
                </mat-card-actions>
            </ng-container>
            <ng-template #notSelected>Select Item</ng-template>
        </mat-card>
    `,
    providers: [EntityCardController]
})
export class EntityCardComponent {
    @ContentChild(EntityFormController) entityFormController: EntityFormController<any>;
    constructor(public entityCardController: EntityCardController) {
        this.entityCardController.initialize();
    }
}

providers: [{ provide: EntityFormController, useClass: HeroFormController }]

<entity-card>
  <hero-form></hero-form>
</entity-card>

export interface Entity {
    value: string;
    label: string;
}
@Injectable()
export abstract class EntityListController<T> {
    constructor(protected entityState: EntityState<T>) {}
    select(value: string) {
        this.entityState.select(value);
    }
    selected$ = this.entityState.selectedId$;
    abstract get entityList$(): Observable<Entity[]>;
}

@Injectable()
export class FilmsListController extends EntityListController<Film> {
    entityList$ = this.entityState.entities$.pipe(
        map(films => films.map(f => ({ value: f.id, label: f.title })))
    )
}

@Component({
    selector: 'entity-list',
    template: `
        <mat-selection-list [multiple]="false"
                            (selectionChange)="entityListController.select($event.options[0].value)">
            <mat-list-option *ngFor="let item of entityListController.entityList$ | async"
                             [selected]="item.value === (entityListController.selected$ | async)"
                             [value]="item.value">
                {{ item.label }}
            </mat-list-option>
        </mat-selection-list>
    `
})
export class EntityListComponent {
    constructor(public entityListController: EntityListController<any>) {}
}

@Component({
    selector: 'entity-page',
    template: `
        <mat-sidenav-container>
            <mat-sidenav opened mode="side">
                <entity-list></entity-list>
            </mat-sidenav>
            <ng-content></ng-content>
        </mat-sidenav-container>
    `,
})
export class EntityPageComponent {}

@Component({
    selector: 'film-page',
    template: `
        <entity-page>
            <entity-card>
                <span class="header">Film</span>
                <film-form></film-form>
            </entity-card>
        </entity-page>
    `,
    providers: [
        { provide: EntityState, useExisting: FilmsState },
        { provide: EntityListController, useClass: FilmsListController }
    ]
})
export class FilmPageComponent {}