File
Metadata
| selector |
app-remove-project-member-component |
| styleUrls |
./remove-project-member-component.component.scss |
| templateUrl |
./remove-project-member-component.component.html |
Methods
|
onDeleteClick
|
onDeleteClick()
|
|
|
|
|
|
Public
data
|
Decorators :
@Inject(MAT_DIALOG_DATA)
|
|
|
|
selectedUsers
|
Type : []
|
Default value : []
|
|
|
import {Inject} from '@angular/core';
import {Component} from '@angular/core';
import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
@Component({
selector: 'app-remove-project-member-component',
templateUrl: './remove-project-member-component.component.html',
styleUrls: ['./remove-project-member-component.component.scss']
})
export class RemoveProjectMemberComponentComponent {
constructor(public dialogRef: MatDialogRef<RemoveProjectMemberComponentComponent>, @Inject(MAT_DIALOG_DATA) public data) {}
//users selected in the dialog to be deleted
selectedUsers = [];
onNoClick(): void {
this.dialogRef.close();
}
onDeleteClick(): void {
const data = {usersToDelete: this.selectedUsers};
this.dialogRef.close(data);
}
}
<h1 mat-dialog-title>Remove Project Member</h1>
<!-- select user to be deleted -->
<div class="dialog-content" mat-dialog-content>
<ng-select
class="ng-select-label"
[dropdownPosition]="'bottom'"
[multiple]="true"
[(ngModel)]="this.selectedUsers"
[ngModelOptions]="{ standalone: true }"
placeholder="Select User(s) to be deleted"
>
<!-- options for users -->
<ng-option *ngFor="let user of this.data.mockMembers" [value]="user.id"> {{ user.displayName }} </ng-option>
</ng-select>
</div>
<div mat-dialog-actions class="actions">
<button mat-raised-button (click)="onNoClick()">Cancel</button>
<button mat-raised-button color="warn" (click)="onDeleteClick()">Delete User</button>
</div>
.dialog-content {
min-height: 400px;
min-width: 400px;
max-width: 600px;
}
.actions {
float: right;
}
.stretch {
width: 100%;
}
.mat-success {
background-color: green;
color: #fff;
}
Legend
Html element with directive