YoutubeDL-Material/src/app/app.component.html

<mat-toolbar color="primary" class="top">
        <table width="100%" height="100%">
            <td class="topbar" style="text-align: left; left:0px; font-size: 15px">
            </td>
            <td class="topbar" style="text-align: center">
                <div style="margin-top: 14px">{{topBarTitle}}</div>
            </td>
            <td class="topbar" style="text-align: right">
    
            </td>
        </table>
</mat-toolbar>

<br/>

<mat-card id="card" class="big demo-basic">
    <mat-card-title>
        <mat-toolbar color="primary">Youtube Downloader</mat-toolbar>
    </mat-card-title>
    <div style="width: 100%; height: 100%; padding-left: 24px; padding-right: 24px; position: relative">
        <mat-card-content>
            <form class="example-form">
                <mat-form-field class="example-full-width">
                    <input matInput [(ngModel)]="url" placeholder="URL" type="url" name="url" [formControl]="urlForm" required>
                    <mat-error *ngIf="urlError || urlForm.invalid">Please enter a valid URL!</mat-error>
                </mat-form-field>
            </form>
            <br/>
            <mat-checkbox [(ngModel)]="audioOnly" style="float: left; margin-top: -12px">Only Audio</mat-checkbox>
            <button style="float: right; margin-top: -16px" (click)="downloadClicked()" [disabled]="downloadingmp3" type="submit" mat-raised-button color="primary">Download</button>
        </mat-card-content>
    </div>
</mat-card>
<br/>
<div class="centered big" id="bar_div" *ngIf="downloadingfile;else nofile">
        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>
<ng-template #nofile>

</ng-template>