mainawycliffe/ng-cdk-overlay-demo

How to build a reusable Modal Overlay/Dialog Using Angular CDK

How to build a reusable Modal Overlay/Dialog Using Angular CDK

You can find the demo for this repo here and the accompanying article here.

ng-cdk-overlay-demo's Issues

incompatiblity with types of ngTemplateOutlet ngComponentOutlet

Hi there! I wanna use this great solution but in angular 12 i have a 2 errors which is related with types of directives *ngTemplateOutlet and *ngComponentOutlet. The issue happens in overlay.component.html when angular compile. How we can fix it for new version of angular?

overlay.component.html

<ng-container [ngSwitch]="contentType">
        <ng-container *ngSwitchCase="'string'">
            <div class="box">
                <div [innerHTML]="content"></div>
            </div>
        </ng-container>

        <ng-container *ngSwitchCase="'template'">
            <ng-container ***ngTemplateOutlet="content; context: context"**></ng-container>
        </ng-container>

        <ng-container *ngSwitchCase="'component'">
            <ng-container ***ngComponentOutlet="content"**></ng-container>
        </ng-container>
    </ng-container>

variables in overlay.component.ts

contentType: 'template' | 'string' | 'component' = 'component';
content: string | TemplateRef<any> | Type<any>;
context;

errors
Type 'string | TemplateRef | Type' is not assignable to type 'TemplateRef | null'.
Type 'string' is not assignable to type 'TemplateRef | null'.

         <ng-container *ngTemplateOutlet="content; context: context"></ng-container>
                         ~~~~~~~~~~~~~~~~

Type 'string | TemplateRef | Type' is not assignable to type 'Type'.
Type 'string' is not assignable to type 'Type'.

         <ng-container *ngComponentOutlet="content"></ng-container>
                        ~~~~~~~~~~~~~~~~~

Overlay does not open

Greetings,

I am trying to implement your Overlay Service in my project. Unfortunately, I am unable to open the overlay from my button click event handler. Most likely, I missed a step in your instructions. If you have time, I would appreciate if you could look over my code and let me know what I am doing wrong.

My code is here.

Feel free to leave any suggestions you may have here.

Thanks!

PortalInjector is depreciated

Thanks for this nice library but in angular version 10.1.2 the PortalInjector is depreciated I tried fixing it using this method in the overlay.service.ts

createInjector(ref: MyOverlayRef, inj: Injector) {
    return Injector.create({parent: this.injector, providers: [{provide: MyOverlayRef, useValue: ref}]});
  }

It compiles but in the overlay.component.html the *ngSwitchCase directives are not recognized apparently dynamically creating component does not include CommonModule from @angular/common. I don't know what to try next any ideas on how to update it