-
Notifications
You must be signed in to change notification settings - Fork 40
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(demo): add advanced examples section
- Loading branch information
1 parent
e6a8f26
commit c841ce2
Showing
12 changed files
with
283 additions
and
6 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
12 changes: 12 additions & 0 deletions
12
projects/elements-demo/src/app/features/examples/advanced/advanced-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,12 @@ | ||
| import { NgModule } from '@angular/core'; | ||
| import { Routes, RouterModule } from '@angular/router'; | ||
|
|
||
| import { AdvancedComponent } from './advanced.component'; | ||
|
|
||
| const routes: Routes = [{ path: '', component: AdvancedComponent }]; | ||
|
|
||
| @NgModule({ | ||
| imports: [RouterModule.forChild(routes)], | ||
| exports: [RouterModule] | ||
| }) | ||
| export class AdvancedRoutingModule {} |
56 changes: 56 additions & 0 deletions
56
projects/elements-demo/src/app/features/examples/advanced/advanced.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,56 @@ | ||
| <div class="wrapper"> | ||
| <h1>Advanced</h1> | ||
|
|
||
| <h2>Elements configured in module</h2> | ||
| <div class="content"> | ||
| <div class="implementation" *ngIf="!example1"> | ||
| <button mat-flat-button color="accent" (click)="example1 = true"> | ||
| <mat-icon>play_arrow</mat-icon> | ||
| Run | ||
| </button> | ||
| </div> | ||
| <div class="implementation" *ngIf="example1"> | ||
| <ion-button *axLazyElement (click)="increment()">Click me</ion-button> | ||
| <p>Counter: {{ counter }}</p> | ||
| </div> | ||
| <div class="description"> | ||
| <p> | ||
| In this example we're pre-configuring | ||
| <code>LazyElementsModule</code> with the element config. That way we | ||
| don't have to specify url of the element in the | ||
| <code>*axLazyElementDirective</code>. The element will be lazy-loaded | ||
| the same way as if we specified url directly. | ||
| </p> | ||
| <pre [highlight]="codeExample1html"></pre> | ||
| <pre [highlight]="codeExample1module"></pre> | ||
| </div> | ||
| </div> | ||
|
|
||
| <h2>Elements configured in module with options</h2> | ||
| <div class="content"> | ||
| <div class="implementation" *ngIf="!example2"> | ||
| <button mat-flat-button color="accent" (click)="example2 = true"> | ||
| <mat-icon>play_arrow</mat-icon> | ||
| Run | ||
| </button> | ||
| </div> | ||
| <div class="implementation" *ngIf="example2"> | ||
| <ng-template #loading>Loading...</ng-template> | ||
| <mwc-checkbox | ||
| *axLazyElement="null; module: true; loadingTemplate: loading" | ||
| >Click me</mwc-checkbox | ||
| > | ||
| </div> | ||
| <div class="description"> | ||
| <p> | ||
| We don't have to specify <code>url</code> when using pre-configured | ||
| <code>LazyElementsModule</code>. We still might need to pass in | ||
| <code>null</code> url into <code>*axLazyElement</code> directive in case | ||
| we want to use other options like <code>module</code> or | ||
| <code>loadingTemplate</code>. | ||
| </p> | ||
| <pre [highlight]="codeExample2html"></pre> | ||
| <pre [highlight]="codeExample2module"></pre> | ||
| </div> | ||
| </div> | ||
| </div> |
35 changes: 35 additions & 0 deletions
35
projects/elements-demo/src/app/features/examples/advanced/advanced.component.scss
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,35 @@ | ||
| .wrapper { | ||
| display: flex; | ||
| flex-direction: column; | ||
|
|
||
| .content { | ||
| display: flex; | ||
| flex-direction: column; | ||
| margin: 0 0 50px 0; | ||
|
|
||
| .implementation { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| flex: 1; | ||
| margin: 0 20px 20px 0; | ||
| border: 2px solid #eee; | ||
| padding: 20px; | ||
|
|
||
| p { | ||
| margin: 10px 0 0 0; | ||
| } | ||
| } | ||
|
|
||
| .description { | ||
| flex: 1.5; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| :host-context(.responsive-large) { | ||
| .wrapper { | ||
| width: 60%; | ||
| } | ||
| } |
38 changes: 38 additions & 0 deletions
38
projects/elements-demo/src/app/features/examples/advanced/advanced.component.spec.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,38 @@ | ||
| import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; | ||
| import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | ||
| import { HighlightModule } from 'ngx-highlightjs'; | ||
| import typescript from 'highlight.js/lib/languages/typescript'; | ||
|
|
||
| import { LazyElementsModule } from '../../../../../../elements/src/lib/lazy-elements/lazy-elements.module'; | ||
|
|
||
| import { AdvancedComponent } from './advanced.component'; | ||
| import { SharedModule } from '../../../shared/shared.module'; | ||
|
|
||
| describe('AdvancedComponent', () => { | ||
| let component: AdvancedComponent; | ||
| let fixture: ComponentFixture<AdvancedComponent>; | ||
|
|
||
| beforeEach(async(() => { | ||
| TestBed.configureTestingModule({ | ||
| schemas: [CUSTOM_ELEMENTS_SCHEMA], | ||
| imports: [ | ||
| LazyElementsModule, | ||
| HighlightModule.forRoot({ | ||
| languages: () => [{ name: 'typescript', func: typescript }] | ||
| }), | ||
| SharedModule | ||
| ], | ||
| declarations: [AdvancedComponent] | ||
| }).compileComponents(); | ||
| })); | ||
|
|
||
| beforeEach(() => { | ||
| fixture = TestBed.createComponent(AdvancedComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
69 changes: 69 additions & 0 deletions
69
projects/elements-demo/src/app/features/examples/advanced/advanced.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,69 @@ | ||
| import { Component, OnInit } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'demo-advanced', | ||
| templateUrl: './advanced.component.html', | ||
| styleUrls: ['./advanced.component.scss'] | ||
| }) | ||
| export class AdvancedComponent implements OnInit { | ||
| // example toggles | ||
| example1 = false; | ||
| example2 = false; | ||
|
|
||
| // example code examples | ||
| codeExample1module = CODE_EXAMPLE_1_MODULE; | ||
| codeExample1html = CODE_EXAMPLE_1_HTML; | ||
| codeExample2module = CODE_EXAMPLE_2_MODULE; | ||
| codeExample2html = CODE_EXAMPLE_2_HTML; | ||
|
|
||
| // example state | ||
| counter = 0; | ||
|
|
||
| constructor() {} | ||
|
|
||
| ngOnInit() {} | ||
|
|
||
| increment() { | ||
| this.counter++; | ||
| } | ||
| } | ||
|
|
||
| const CODE_EXAMPLE_1_MODULE = `// pre-configured LazyElementsModule | ||
| const options: LazyElementModuleOptions = { | ||
| elementConfigs: [ | ||
| { tag: 'ion-button', url: 'https://unpkg.com/@ionic/core@4.6.2/dist/ionic/ionic.js' } | ||
| ] | ||
| }; | ||
| @NgModule({ | ||
| schemas: [CUSTOM_ELEMENTS_SCHEMA], | ||
| declarations: [FeatureComponent], | ||
| imports: [ | ||
| LazyElementsModule.forFeature(options), | ||
| ] | ||
| }) | ||
| export class FeatureModule { } | ||
| `; | ||
|
|
||
| const CODE_EXAMPLE_1_HTML = `<!-- No need to specify url --> | ||
| <ion-button *axLazyElement></ion-button>`; | ||
|
|
||
| const CODE_EXAMPLE_2_MODULE = `// pre-configured LazyElementsModule | ||
| const options: LazyElementModuleOptions = { | ||
| elementConfigs: [ | ||
| { tag: 'mwc-checkbox', url: 'https://unpkg.com/@material/mwc-checkbox@0.6.0/mwc-checkbox.js?module' } | ||
| ] | ||
| }; | ||
| @NgModule({ | ||
| schemas: [CUSTOM_ELEMENTS_SCHEMA], | ||
| declarations: [FeatureComponent], | ||
| imports: [ | ||
| LazyElementsModule.forFeature(options), | ||
| ] | ||
| }) | ||
| export class FeatureModule { } | ||
| `; | ||
|
|
||
| const CODE_EXAMPLE_2_HTML = `<!-- We have to specify null; url to be able to pass in additional options --> | ||
| <mwc-checkbox *axLazyElement="null; module: true; loadingTemplate: loading;"></mwc-checkbox>`; |
38 changes: 38 additions & 0 deletions
38
projects/elements-demo/src/app/features/examples/advanced/advanced.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,38 @@ | ||
| import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; | ||
| import { HighlightModule } from 'ngx-highlightjs'; | ||
|
|
||
| import { | ||
| LazyElementModuleOptions, | ||
| LazyElementsModule | ||
| } from '../../../../../../elements/src/lib/lazy-elements/lazy-elements.module'; | ||
|
|
||
| import { SharedModule } from '../../../shared/shared.module'; | ||
|
|
||
| import { AdvancedRoutingModule } from './advanced-routing.module'; | ||
| import { AdvancedComponent } from './advanced.component'; | ||
|
|
||
| const options: LazyElementModuleOptions = { | ||
| elementConfigs: [ | ||
| { | ||
| tag: 'ion-button', | ||
| url: 'https://unpkg.com/@ionic/core@4.6.2/dist/ionic/ionic.js' | ||
| }, | ||
| { | ||
| tag: 'mwc-checkbox', | ||
| url: | ||
| 'https://unpkg.com/@material/mwc-checkbox@0.6.0/mwc-checkbox.js?module' | ||
| } | ||
| ] | ||
| }; | ||
|
|
||
| @NgModule({ | ||
| schemas: [CUSTOM_ELEMENTS_SCHEMA], | ||
| declarations: [AdvancedComponent], | ||
| imports: [ | ||
| HighlightModule, | ||
| LazyElementsModule.forFeature(options), | ||
| SharedModule, | ||
| AdvancedRoutingModule | ||
| ] | ||
| }) | ||
| export class AdvancedModule {} |
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