-
-
Save talamaska/ae5572d58d0e5cebcb32b23964ddb464 to your computer and use it in GitHub Desktop.
interface CustomOverlayConfig { | |
hasBackdropClick?: boolean; | |
isCentered?: boolean; | |
size?: any; | |
top?: string; | |
} | |
const DEFAULT_CUSTOM_CONFIG: CustomOverlayConfig = { | |
hasBackdropClick: false, | |
isCentered: true, | |
size: null | |
}; | |
@Injectable() | |
export class TemplateModalService { | |
public dialogRef: TemplateModalOverlayRef; | |
public customConfig: CustomOverlayConfig; | |
constructor( | |
private injector: Injector, | |
private overlay: Overlay | |
) { } | |
open(templateRef: CdkPortal, config: FormModalConfig = {}, customConfig: CustomOverlayConfig = {}) {...} |
public dialogRef: TemplateModalOverlayRef; |
@ViewChild('ratingModal') ratingModal: TemplatePortal<any>; |
public closeModal() { | |
this.dialogRef.close(); | |
this.modalData.next({}); | |
} |
<ng-template cdkPortal #ratingModal="cdkPortal"> | |
<rating-modal [modalData]="modalData | async" (close)="closeModal()" (ratings)="updateRating($event)" (rate)="rateEvent($event)"></rating-modal> | |
</ng-template> |
this.dialogRef = this.modalService.open(this.ratingModal, {}, { | |
isCentered: false | |
}); |
import { OverlayRef } from '@angular/cdk/overlay'; | |
export class TemplateModalOverlayRef { | |
constructor(private overlayRef: OverlayRef) { } | |
close(): void { | |
this.overlayRef.dispose(); | |
} | |
} |
private attachModalContainer( | |
overlayRef: OverlayRef, | |
config: FormModalConfig, | |
dialogRef: TemplateModalOverlayRef, | |
templateRef: CdkPortal // this was added | |
) { | |
const containerRef = overlayRef.attach(templateRef); // this was changed | |
return containerRef; | |
} |
private getOverlayConfig(config: FormModalConfig): OverlayConfig { | |
let positionStrategy = this.overlay.position() | |
.global(); | |
if (this.customConfig.isCentered) { | |
positionStrategy = positionStrategy | |
.centerHorizontally() | |
.centerVertically(); | |
} | |
if (this.customConfig.size) { | |
positionStrategy = positionStrategy | |
.width(this.customConfig.size.width) | |
.height(this.customConfig.size.height); | |
} | |
if (this.customConfig.top) { | |
positionStrategy = positionStrategy | |
.top(this.customConfig.top) | |
.centerHorizontally(); | |
} |
- Remote-Controlled Template-Based Modals
please give me complete example to understand better. kindly give me the link full project setup
Full example, little bit outdated so you'll have to migrate some apis that changed in A9.
Actually, in step 3 you can remove all lines related to
injector
.
Also you probably forgot to importPortalModule
.
You're right I don't use the injector in the template driven modal
Also you probably forgot to import
PortalModule
.
the remote controlling of the template modal is performed via the ViewChild ratingModal
I'm also getting error 'there is no directive with exportAs set to cdkPortal'. I've made all of the adjustments, and I'm importing PortalModule. Was this every resolved?
I'm also getting error 'there is no directive with exportAs set to cdkPortal'. I've made all of the adjustments, and I'm importing PortalModule. Was this every resolved?
Gotta love it - a minute after I submit this, I found my error. I was not, in fact, importing Portal Module in the correct dependent component module.
Anyway, thanks for the great tutorial!
please give me complete example to understand better. kindly give me the link full project setup