installer.component.html

<mat-sidenav-container autosize class="maarch-container">
    <mat-sidenav-content>
        <div class="bg-head">
            <div class="bg-head-content" [class.fullContainer]="appService.getViewMode()">
            </div>
        </div>
        <div class="container" [class.fullContainer]="appService.getViewMode()">
            <div class="container-content" style="overflow: hidden;">
                <mat-horizontal-stepper [@.disabled]="true" linear #stepper style="height: 100vh;overflow: auto;" (selectionChange)="initStep($event)">
                    <mat-step label="install">
                        <ng-template matStepLabel>Installation</ng-template>
                        <div class="stepContainer">
                            <div class="stepContent">
                                <app-welcome #stepContent></app-welcome>
                            </div>
                            <button mat-fab matStepperNext [title]="lang.next" class="nextStepButton" color="primary">
                                <mat-icon class="fa fa-arrow-right"></mat-icon>
                            </button>
                        </div>
                    </mat-step>
                    <mat-step [stepControl]="appPrerequisite.getFormGroup()">
                        <ng-template matStepLabel>{{lang.prerequisite}}</ng-template>
                        <div class="stepContainer">
                            <div class="stepContent">
                                <app-prerequisite #appPrerequisite #stepContent></app-prerequisite>
                            </div>
                            <button mat-fab matStepperPrevious [title]="lang.previous" class="previousStepButton" color="primary">
                                <mat-icon class="fa fa-arrow-left"></mat-icon>
                            </button>
                            <button mat-fab matStepperNext [title]="lang.next" class="nextStepButton" color="primary" [disabled]="!appPrerequisite.isValidStep()">
                                <mat-icon class="fa fa-arrow-right"></mat-icon>
                            </button>
                        </div>
                    </mat-step>
                    <mat-step [stepControl]="appDatabase.getFormGroup()">
                        <ng-template matStepLabel>{{lang.database}}</ng-template>
                        <div class="stepContainer">
                            <div class="stepContent">
                                <app-database #appDatabase #stepContent (nextStep)="nextStep()"></app-database>
                            </div>
                            <button mat-fab matStepperPrevious [title]="lang.previous" class="previousStepButton" color="primary">
                                <mat-icon class="fa fa-arrow-left"></mat-icon>
                            </button>
                            <button mat-fab matStepperNext [title]="lang.next" class="nextStepButton" color="primary" [disabled]="!appDatabase.isValidStep()">
                                <mat-icon class="fa fa-arrow-right"></mat-icon>
                            </button>
                        </div>
                    </mat-step>
                    <mat-step [stepControl]="appDocservers.getFormGroup()">
                        <ng-template matStepLabel>{{lang.docserver}}</ng-template>
                        <div class="stepContainer">
                            <div class="stepContent">
                                <app-docservers #appDocservers #stepContent (nextStep)="nextStep()"></app-docservers>
                            </div>
                            <button mat-fab matStepperPrevious [title]="lang.previous" class="previousStepButton" color="primary">
                                <mat-icon class="fa fa-arrow-left"></mat-icon>
                            </button>
                            <button mat-fab matStepperNext [title]="lang.next" class="nextStepButton" color="primary" [disabled]="!appDocservers.isValidStep()">
                                <mat-icon class="fa fa-arrow-right"></mat-icon>
                            </button>
                        </div>
                    </mat-step>
                    <mat-step [stepControl]="appCustomization.getFormGroup()">
                        <ng-template matStepLabel>{{lang.customization}}</ng-template>
                        <div class="stepContainer">
                            <div class="stepContent">
                                <app-customization #appCustomization #stepContent></app-customization>
                            </div>
                            <button mat-fab matStepperPrevious [title]="lang.previous" class="previousStepButton" color="primary">
                                <mat-icon class="fa fa-arrow-left"></mat-icon>
                            </button>
                            <button mat-fab matStepperNext [title]="lang.next" class="nextStepButton" color="primary" [disabled]="!appCustomization.isValidStep()">
                                <mat-icon class="fa fa-arrow-right"></mat-icon>
                            </button>
                        </div>
                    </mat-step>
                    <mat-step [stepControl]="appUseradmin.getFormGroup()">
                        <ng-template matStepLabel>{{lang.userAdmin}}</ng-template>
                        <div class="stepContainer">
                            <div class="stepContent">
                                <app-useradmin #appUseradmin #stepContent (tiggerInstall)="endInstall()"></app-useradmin>
                            </div>
                            <button mat-fab matStepperPrevious [title]="lang.previous" class="previousStepButton" color="primary">
                                <mat-icon class="fa fa-arrow-left"></mat-icon>
                            </button>
                            <button mat-fab [title]="lang.beginInstall" class="nextStepButton" color="accent" [disabled]="!appUseradmin.isValidStep()" (click)="endInstall()">
                                <mat-icon class="fas fa-check-double"></mat-icon>
                            </button>
                        </div>
                    </mat-step>
                    <ng-template matStepperIcon="edit">
                        <mat-icon class="fa fa-check stepIcon"></mat-icon>
                    </ng-template>
                
                    <ng-template matStepperIcon="done">
                        <mat-icon class="fa fa-check stepIcon"></mat-icon>
                    </ng-template>
                
                    <ng-template matStepperIcon="error">
                        <mat-icon class="fa fa-times stepIcon" style="color: red;font-size: 15px !important;"></mat-icon>
                    </ng-template>
                </mat-horizontal-stepper>
            </div>
        </div>
    </mat-sidenav-content>
</mat-sidenav-container>