forked from ionic-team/ionic-framework
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(angular): attach change detector ref for inline overlays (ionic-t…
…eam#24521) Allow template bindings to update with inline overlays. Resolves ionic-team#24502
- Loading branch information
1 parent
bd82b5d
commit 5c54593
Showing
15 changed files
with
161 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
describe('Popovers: Inline', () => { | ||
beforeEach(() => { | ||
cy.visit('/popover-inline'); | ||
}); | ||
|
||
it('should initially have no items', () => { | ||
cy.get('ion-list ion-item').should('not.exist'); | ||
}); | ||
|
||
it('should have items after 1500ms', () => { | ||
cy.wait(1500); | ||
|
||
cy.get('ion-list ion-item:nth-child(1)').should('have.text', 'A'); | ||
cy.get('ion-list ion-item:nth-child(2)').should('have.text', 'B'); | ||
cy.get('ion-list ion-item:nth-child(3)').should('have.text', 'C'); | ||
cy.get('ion-list ion-item:nth-child(4)').should('have.text', 'D'); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
export * from './modal-inline.component'; | ||
export * from './modal-inline.module'; |
16 changes: 16 additions & 0 deletions
16
angular/test/test-app/src/app/modal-inline/modal-inline-routing.module.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
import { NgModule } from "@angular/core"; | ||
import { RouterModule } from "@angular/router"; | ||
import { ModalInlineComponent } from "."; | ||
|
||
@NgModule({ | ||
imports: [ | ||
RouterModule.forChild([ | ||
{ | ||
path: '', | ||
component: ModalInlineComponent | ||
} | ||
]) | ||
], | ||
exports: [RouterModule] | ||
}) | ||
export class ModalInlineRoutingModule { } |
11 changes: 11 additions & 0 deletions
11
angular/test/test-app/src/app/modal-inline/modal-inline.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
<ion-modal [isOpen]="true" [breakpoints]="[0.1, 0.5, 1]" [initialBreakpoint]="0.5"> | ||
<ng-template> | ||
<ion-content> | ||
<ion-list> | ||
<ion-item *ngFor="let item of items"> | ||
<ion-label>{{ item }}</ion-label> | ||
</ion-item> | ||
</ion-list> | ||
</ion-content> | ||
</ng-template> | ||
</ion-modal> |
21 changes: 21 additions & 0 deletions
21
angular/test/test-app/src/app/modal-inline/modal-inline.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import { AfterViewInit, Component } from "@angular/core"; | ||
|
||
/** | ||
* Validates that inline modals will correctly display | ||
* dynamic contents that are updated after the modal is | ||
* display. | ||
*/ | ||
@Component({ | ||
selector: 'app-modal-inline', | ||
templateUrl: 'modal-inline.component.html' | ||
}) | ||
export class ModalInlineComponent implements AfterViewInit { | ||
|
||
items: string[] = []; | ||
|
||
ngAfterViewInit(): void { | ||
setTimeout(() => { | ||
this.items = ['A', 'B', 'C', 'D']; | ||
}, 1000); | ||
} | ||
} |
12 changes: 12 additions & 0 deletions
12
angular/test/test-app/src/app/modal-inline/modal-inline.module.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import { CommonModule } from "@angular/common"; | ||
import { NgModule } from "@angular/core"; | ||
import { IonicModule } from "@ionic/angular"; | ||
import { ModalInlineRoutingModule } from "./modal-inline-routing.module"; | ||
import { ModalInlineComponent } from "./modal-inline.component"; | ||
|
||
@NgModule({ | ||
imports: [CommonModule, IonicModule, ModalInlineRoutingModule], | ||
declarations: [ModalInlineComponent], | ||
exports: [ModalInlineComponent] | ||
}) | ||
export class ModalInlineModule { } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from './popover-inline.module'; |
14 changes: 14 additions & 0 deletions
14
angular/test/test-app/src/app/popover-inline/popover-inline-routing.module.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import { NgModule } from "@angular/core"; | ||
import { RouterModule } from "@angular/router"; | ||
import { PopoverInlineComponent } from "./popover-inline.component"; | ||
|
||
@NgModule({ | ||
imports: [RouterModule.forChild([ | ||
{ | ||
path: '', | ||
component: PopoverInlineComponent | ||
} | ||
])], | ||
exports: [RouterModule] | ||
}) | ||
export class PopoverInlineRoutingModule { } |
11 changes: 11 additions & 0 deletions
11
angular/test/test-app/src/app/popover-inline/popover-inline.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
<ion-popover [isOpen]="true"> | ||
<ng-template> | ||
<ion-content> | ||
<ion-list> | ||
<ion-item *ngFor="let item of items"> | ||
<ion-label>{{ item }}</ion-label> | ||
</ion-item> | ||
</ion-list> | ||
</ion-content> | ||
</ng-template> | ||
</ion-popover> |
22 changes: 22 additions & 0 deletions
22
angular/test/test-app/src/app/popover-inline/popover-inline.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import { AfterViewInit, Component } from "@angular/core"; | ||
|
||
/** | ||
* Validates that inline popovers will correctly display | ||
* dynamic contents that are updated after the modal is | ||
* display. | ||
*/ | ||
@Component({ | ||
selector: 'app-popover-inline', | ||
templateUrl: 'popover-inline.component.html' | ||
}) | ||
export class PopoverInlineComponent implements AfterViewInit { | ||
|
||
items: string[] = []; | ||
|
||
ngAfterViewInit(): void { | ||
setTimeout(() => { | ||
this.items = ['A', 'B', 'C', 'D']; | ||
}, 1000); | ||
} | ||
|
||
} |
11 changes: 11 additions & 0 deletions
11
angular/test/test-app/src/app/popover-inline/popover-inline.module.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { CommonModule } from "@angular/common"; | ||
import { NgModule } from "@angular/core"; | ||
import { IonicModule } from "@ionic/angular"; | ||
import { PopoverInlineRoutingModule } from "./popover-inline-routing.module"; | ||
import { PopoverInlineComponent } from "./popover-inline.component"; | ||
|
||
@NgModule({ | ||
imports: [CommonModule, IonicModule, PopoverInlineRoutingModule], | ||
declarations: [PopoverInlineComponent], | ||
}) | ||
export class PopoverInlineModule { } |