ccims documentation
  1. Components
  2. RemoveProjectMemberComponentComponent

File

src/app/dialogs/remove-project-member-component/remove-project-member-component.component.ts

Metadata

selector app-remove-project-member-component
styleUrls ./remove-project-member-component.component.scss
templateUrl ./remove-project-member-component.component.html

Index

Properties
Methods

Constructor

constructor(dialogRef: MatDialogRef<RemoveProjectMemberComponentComponent>, data)
Defined in src/app/dialogs/remove-project-member-component/remove-project-member-component.component.ts:10
Parameters :
Name Type Optional
dialogRef MatDialogRef<RemoveProjectMemberComponentComponent> No
data No

Methods

onDeleteClick
onDeleteClick()
Defined in src/app/dialogs/remove-project-member-component/remove-project-member-component.component.ts:20
Returns : void
onNoClick
onNoClick()
Defined in src/app/dialogs/remove-project-member-component/remove-project-member-component.component.ts:16
Returns : void

Properties

Public data
Decorators :
@Inject(MAT_DIALOG_DATA)
Defined in src/app/dialogs/remove-project-member-component/remove-project-member-component.component.ts:11
Public dialogRef
Type : MatDialogRef<RemoveProjectMemberComponentComponent>
Defined in src/app/dialogs/remove-project-member-component/remove-project-member-component.component.ts:11
selectedUsers
Type : []
Default value : []
Defined in src/app/dialogs/remove-project-member-component/remove-project-member-component.component.ts:14
 
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>

./remove-project-member-component.component.scss 

.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
Component
Html element with directive

results matching ""

    No results matching ""