File
Metadata
| selector |
tc-tibco-cloud-new-element |
| styleUrls |
./tibco-cloud-new-element.component.css |
| templateUrl |
./tibco-cloud-new-element.component.html |
|
Public
data
|
Type : any
|
Decorators :
@Inject(MAT_DIALOG_DATA)
|
|
|
|
Public
elementType
|
Type : string
|
|
|
|
Public
idReadOnly
|
Default value : false
|
|
|
import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'tc-tibco-cloud-new-element',
templateUrl: './tibco-cloud-new-element.component.html',
styleUrls: ['./tibco-cloud-new-element.component.css']
})
export class TibcoCloudNewElementComponent {
public id: string;
public name: string;
public elementType: string;
public idReadOnly = false;
constructor(
public dialogRef: MatDialogRef<TibcoCloudNewElementComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
) {
this.elementType = data.resourceType;
this.idReadOnly = data.idReadOnly;
this.id = data.id;
}
onCreate() {
this.dialogRef.close({ event: 'submit', id: this.id, name: this.name });
}
onCancel() {
this.dialogRef.close();
}
}
<mat-toolbar class="tcs-case-creation-dialog-toolbar">
<div fxLayout="row" fxLayoutAlign="space-between center" fxFlex>
<span class="tcs-case-creation-dialog-toolbar-text">Create New {{elementType}}</span>
</div>
</mat-toolbar>
<div class="tcs-dialog-outer-div">
<div mat-dialog-content class="tcs-new-element-form" fxLayout="column" fxLayoutAlign="space-around none">
<mat-form-field>
<input matInput placeholder="Id" [(ngModel)]="id" [readonly]="idReadOnly">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Name" [(ngModel)]="name" required>
</mat-form-field>
</div>
<mat-dialog-actions class="tcs-dialog-actions" fxLayout="row" fxLayoutAlign="end center">
<button mat-button mat-flat-button color="secondary" (click)="onCancel()">Cancel</button>
<button mat-button mat-flat-button color="primary" [disabled]="!name || !id" (click)="onCreate()">Create</button>
</mat-dialog-actions>
</div>
.tcs-dialog-outer-div {
height: 100%;
display: flex;
flex-direction: column;
padding: 30px;
}
.tcs-new-element-form {
margin-top: 5px;
}
Legend
Html element with directive