src/app/core/common-components/dialog-close/dialog-close.component.ts
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | app-dialog-close |
| standalone | true |
| imports |
FontAwesomeModule
MatButtonModule
MatDialogClose
|
| styleUrls | ./dialog-close.component.scss |
| templateUrl | ./dialog-close.component.html |
AdminEditDescriptionOnlyFieldComponent
AdminEntityFieldComponent
AdminRelatedEntityDetailsComponent
ApiClientCredentialsDialogComponent
AttendanceDetailsComponent
AutomatedFieldMappingComponent
AutomatedFieldUpdateComponent
ChangeHistoryDialogComponent
ComingSoonComponent
ConditionEditorDialogComponent
ConfigureEnumPopupComponent
ConfigureTranslationsPopupComponent
ConfirmationDialogComponent
CreateApiClientDialogComponent
DialogViewComponent
EditApiClientScopesDialogComponent
EditProgressDashboardComponent
EntityBulkEditComponent
ExportDialogComponent
FeaturePermissionDialogComponent
ImagePopupComponent
JsonEditorDialogComponent
MapPropertiesPopupComponent
RowDetailsComponent
UserDetailsComponent
WidgetComponentSelectComponent
FontAwesomeModule
MatButtonModule
MatDialogClose
AfterViewChecked
import {
AfterViewChecked,
Component,
ViewChild,
ChangeDetectionStrategy,
} from "@angular/core";
import { MatButton, MatButtonModule } from "@angular/material/button";
import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
import { MatDialogClose } from "@angular/material/dialog";
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: "app-dialog-close",
templateUrl: "./dialog-close.component.html",
styleUrls: ["./dialog-close.component.scss"],
imports: [FontAwesomeModule, MatButtonModule, MatDialogClose],
})
export class DialogCloseComponent implements AfterViewChecked {
@ViewChild("button") button: MatButton;
ngAfterViewChecked() {
(<HTMLButtonElement>this.button._elementRef.nativeElement).blur();
}
}
<button mat-icon-button class="overlay-close-button" mat-dialog-close #button>
<fa-icon icon="times"></fa-icon>
</button>
./dialog-close.component.scss
/**
* Positions the 'x' button that is shown for an overlay to the top
* of the overlay's reading-end side (top-right in LTR, top-left in RTL)
*/
.overlay-close-button {
position: absolute;
top: 0;
inset-inline-end: 0;
border-radius: 0;
border-start-end-radius: 4px;
border-end-start-radius: 4px;
}
:host ::ng-deep .mat-mdc-icon-button .mat-mdc-button-persistent-ripple {
border-radius: 0;
border-start-end-radius: 4px;
border-end-start-radius: 4px;
}