-
Notifications
You must be signed in to change notification settings - Fork 106
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix Carousel on Async Wrapped Components (#470)
@santoshyadavdev please check method "_checkChanges()". It has the same content of the previous DoCheck but I removed the _defDirectives defined control and added the _markedForCheck flag to recheck _arrayChanges. _checkChanges() is also triggered in AfterContentInit when we are sure _defDirectives are defined.
- Loading branch information
1 parent
2e9310d
commit f7e23a0
Showing
20 changed files
with
1,454 additions
and
72 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import 'zone.js/node'; | ||
|
|
||
| import { APP_BASE_HREF } from '@angular/common'; | ||
| import { ngExpressEngine } from '@nguniversal/express-engine'; | ||
| import express from 'express'; | ||
| import { existsSync } from 'node:fs'; | ||
| import { join } from 'node:path'; | ||
| import { AppServerModule } from './src/main.server'; | ||
|
|
||
| // The Express app is exported so that it can be used by serverless Functions. | ||
| export function app(): express.Express { | ||
| const server = express(); | ||
| const distFolder = join(process.cwd(), 'dist/apps/ngu-carousel-example/browser'); | ||
| const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index'; | ||
|
|
||
| // Our Universal express-engine (found @ https://github.com/angular/universal/tree/main/modules/express-engine) | ||
| server.engine('html', ngExpressEngine({ | ||
| bootstrap: AppServerModule | ||
| })); | ||
|
|
||
| server.set('view engine', 'html'); | ||
| server.set('views', distFolder); | ||
|
|
||
| // Example Express Rest API endpoints | ||
| // server.get('/api/**', (req, res) => { }); | ||
| // Serve static files from /browser | ||
| server.get('*.*', express.static(distFolder, { | ||
| maxAge: '1y' | ||
| })); | ||
|
|
||
| // All regular routes use the Universal engine | ||
| server.get('*', (req, res) => { | ||
| res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] }); | ||
| }); | ||
|
|
||
| return server; | ||
| } | ||
|
|
||
| function run(): void { | ||
| const port = process.env['PORT'] || 4000; | ||
|
|
||
| // Start up the Node server | ||
| const server = app(); | ||
| server.listen(port, () => { | ||
| console.log(`Node Express server listening on http://localhost:${port}`); | ||
| }); | ||
| } | ||
|
|
||
| // Webpack will replace 'require' with '__webpack_require__' | ||
| // '__non_webpack_require__' is a proxy to Node 'require' | ||
| // The below code is to ensure that the server is run only when not requiring the bundle. | ||
| declare const __non_webpack_require__: NodeRequire; | ||
| const mainModule = __non_webpack_require__.main; | ||
| const moduleFilename = mainModule && mainModule.filename || ''; | ||
| if (moduleFilename === __filename || moduleFilename.includes('iisnode')) { | ||
| run(); | ||
| } | ||
|
|
||
| export * from './src/main.server'; |
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,14 @@ | ||
| import { NgModule } from '@angular/core'; | ||
| import { ServerModule } from '@angular/platform-server'; | ||
|
|
||
| import { AppModule } from './app.module'; | ||
| import { AppComponent } from './app.component'; | ||
|
|
||
| @NgModule({ | ||
| imports: [ | ||
| AppModule, | ||
| ServerModule, | ||
| ], | ||
| bootstrap: [AppComponent], | ||
| }) | ||
| export class AppServerModule {} |
5 changes: 3 additions & 2 deletions
5
apps/ngu-carousel-example/src/app/getting-started/getting-started.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 |
|---|---|---|
| @@ -1,8 +1,9 @@ | ||
| import { Component } from '@angular/core'; | ||
| import { ChangeDetectionStrategy, Component } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-getting-started', | ||
| templateUrl: './getting-started.component.html', | ||
| styleUrls: ['./getting-started.component.scss'] | ||
| styleUrls: ['./getting-started.component.scss'], | ||
| changeDetection: ChangeDetectionStrategy.OnPush | ||
| }) | ||
| export class GettingStartedComponent {} |
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
5 changes: 3 additions & 2 deletions
5
apps/ngu-carousel-example/src/app/main-nav/main-nav.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
39 changes: 39 additions & 0 deletions
39
apps/ngu-carousel-example/src/app/wrapped/wrapped-carousel/wrapped-carousel.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,39 @@ | ||
| <div class="wrapped-carosuel" *ngIf="carouselTileItems.length"> | ||
| <h2>Wrapped Carousel</h2> | ||
| <ngu-carousel #myCarousel [inputs]="config" [dataSource]="carouselTileItems"> | ||
| <button NguCarouselPrev class="leftRs" [style.opacity]="myCarousel.isFirst ? 0.5 : 1"> | ||
| < | ||
| </button> | ||
|
|
||
| <ngu-tile *nguCarouselDef="let item; index as i; let ani = animate" [@slider]="ani"> | ||
| <ng-container *ngIf="i % 2 === 0"> | ||
| <ng-container | ||
| *ngTemplateOutlet="card; context: { $implicit: item, index: i }" | ||
| ></ng-container> | ||
| </ng-container> | ||
| <ng-container *ngIf="i % 2 !== 0"> | ||
| <div class="tile" [style.background]="'url(' + item + ')'"> | ||
| <h1>Odd: {{ i + 1 }}</h1> | ||
| </div> | ||
| </ng-container> | ||
| </ngu-tile> | ||
|
|
||
| <button NguCarouselNext class="rightRs" [style.opacity]="myCarousel.isLast ? 0.5 : 1"> | ||
| > | ||
| </button> | ||
|
|
||
| <ul class="myPoint" NguCarouselPoint> | ||
| <li | ||
| *ngFor="let i of myCarousel.pointNumbers" | ||
| [class.active]="i === myCarousel.activePoint" | ||
| (click)="myCarousel.moveTo(i)" | ||
| ></li> | ||
| </ul> | ||
| </ngu-carousel> | ||
| </div> | ||
|
|
||
| <ng-template #card let-item let-i="index"> | ||
| <div class="tile" [style.background]="'url(' + item + ')'"> | ||
| <h1>Even: {{ i + 1 }}</h1> | ||
| </div> | ||
| </ng-template> |
Oops, something went wrong.