File
Metadata
| selector |
app-access-token-dialog |
| styleUrls |
./access-token-dialog.component.scss |
| templateUrl |
./access-token-dialog.component.html |
Constructor
constructor(dialogRef: MatDialogRef, dialog: MatDialog)
|
|
|
Parameters :
| Name |
Type |
Optional |
| dialogRef |
MatDialogRef<boolean>
|
No
|
| dialog |
MatDialog
|
No
|
|
Methods
|
Public
closeDialog
|
closeDialog()
|
|
|
|
|
|
Public
generateToken
|
generateToken()
|
|
|
|
|
|
Public
dialogRef
|
Type : MatDialogRef<boolean>
|
|
|
|
selected
|
Type : string
|
Default value : 'option2'
|
|
|
import {Component} from '@angular/core';
import {MatDialog, MatDialogRef} from '@angular/material/dialog';
@Component({
selector: 'app-access-token-dialog',
templateUrl: './access-token-dialog.component.html',
styleUrls: ['./access-token-dialog.component.scss']
})
export class AccessTokenDialogComponent {
selected = 'option2';
constructor(public dialogRef: MatDialogRef<boolean>, private dialog: MatDialog) {}
//close access token settings dialog
public closeDialog(): void {
this.dialogRef.close();
}
public generateToken(): void {
//TODO
}
}
<div class="dialog">
<button mat-button color="primary" class="new-item-button" (click)="closeDialog()">
<mat-icon>close_ios</mat-icon>
</button>
<h1 mat-dialog-title style="text-align: center">Personal access tokens</h1>
Generate a personal access token for quicker access ...
<form class="example-form">
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Note</mat-label>
<input type="email" matInput placeholder="Ex. what will this token be used for?" />
</mat-form-field>
</form>
<mat-form-field appearance="fill">
<mat-label>Expitarion</mat-label>
<mat-select [(value)]="selected">
<mat-option value="option1">7 days</mat-option>
<mat-option value="option2">30 days</mat-option>
<mat-option value="option3">60 days</mat-option>
<mat-option value="option4">90 days</mat-option>
</mat-select>
</mat-form-field>
<br />
<button mat-button [color]="'primary'" (click)="this.generateToken()">Generate Token</button>
<button mat-button [mat-dialog-close]="null">Cancel</button>
</div>
.dialog {
width: 500px;
}
.example-form {
min-width: 150px;
max-width: 500px;
width: 100%;
}
.example-full-width {
width: 100%;
}
.new-item-button {
float: right;
}
Legend
Html element with directive