Untitled

import { Component, Input, OnDestroy, OnInit, ViewChild } from "@angular/core";
import { SidenavService } from "app/core/sidenav/sidenav.service";
import { IStory } from "app/core/model/story.interface";
import { IStatus } from "app/shared/model/status.interface";
import { StoryStatus } from "app/shared/story/story-status.constants";
import { MatSelect, MatTabGroup } from "@angular/material";
import { Subject } from "rxjs/Subject";
import { HubSnackBarService } from "app/core/hub-snack-bar/service/hub-snack-bar.service";
import { StoryFormComponent } from "app/shared/story/story-form/story-form.component";

@Component({
    selector: "story-detail-overlay",
    templateUrl: "./story-detail-overlay.component.html",
    styleUrls: ["./story-detail-overlay.component.scss"]
})
export class StoryDetailOverlayComponent implements OnInit, OnDestroy {

    @Input()
    story: IStory;

    public statusArray: IStatus[];

    public commentTabActive: boolean = false;

    @ViewChild("matTabGroup")
    matTabGroup: MatTabGroup;

    @ViewChild("storyForm")
    storyForm: StoryFormComponent;

    @ViewChild("storyStatusSelect")
    storyStatusSelect: MatSelect;

    private unsubscribe: Subject<void> = new Subject<void>();

    constructor(private sidenavService: SidenavService,
                private hubSnackBarService: HubSnackBarService) {
        this.statusArray = [StoryStatus.NEW, StoryStatus.READY_TO_PUBLISH, StoryStatus.PUBLISHED];
    }

    ngOnInit() {
        this.matTabGroup.selectedIndexChange
            .takeUntil(this.unsubscribe)
            .subscribe((selectedIndex: number) => {

                // This selectedIndex needs to be updated (e.g. if a tab is inserted before the comments tab)!

                this.commentTabActive = selectedIndex === 2;
            });

        this.storyStatusSelect.setDisabledState(this.isPublished());
    }

    private isPublished() {
        return this.story.status === StoryStatus.PUBLISHED.id;
    }

    ngOnDestroy() {
        this.unsubscribe.next();
        this.unsubscribe.complete();
    }
}
###################
template
<mat-tab-group #matTabGroup>
(...)
</mat-tab-group>
<div *ngIf="!commentTabActive" class="footer-bar padding-2" fxLayoutAlign="start center">
    <div class="flex-outer" fxFlexFill>
        <div class="form-field-wrapper">
            <label>
                {{ "APP.STORIES.STATUS.STATUS_LABEL" | translate }}
            </label>
            <mat-form-field floatPlaceholder="never">
                <mat-select #storyStatusSelect [(ngModel)]="story.status">
                    <mat-option *ngFor="let status of statusArray" [value]="status.id">
                        {{ status.title | translate }}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </div>
    </div>
</div>