Skip to content

Commit

Permalink
Fix after view init
Browse files Browse the repository at this point in the history
  • Loading branch information
fboeller committed Mar 7, 2021
1 parent 08a367a commit 3487281
Show file tree
Hide file tree
Showing 6 changed files with 55 additions and 27 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.loadables {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 50px;
}
Original file line number Diff line number Diff line change
@@ -1,17 +1,24 @@
<h2>Custom loading template</h2>
<p>
This example displays the usage of the `ld-loadable` component with a custom
loading template.
loading template. The left loadable uses the custom loading template while the
right component uses the default.
</p>
<app-load-form (loadable)="loadable = $event"></app-load-form>
<ld-loadable [loadable]="loadable" [templates]="{ loading: loading }">
<h3>Loaded</h3>
<pre>{{ loadable | loadedValue | json }}</pre>
</ld-loadable>
<ng-template #loading>
<p>
The 'Answer to the Ultimate Question of Life, the Universe, and Everything'
is currently being computed. This operation might take a few minutes. Please
don't turn off your computer during this operation.
</p>
</ng-template>
<div>
<h3>State of the loadable</h3>
<pre>{{ loadable | json }}</pre>
</div>
<div class="loadables">
<ld-loadable [loadable]="loadable" [templates]="{ loading: loading }">
<h3>Loaded</h3>
<pre>{{ loadable | loadedValue | json }}</pre>
</ld-loadable>
<ng-template #loading>
<p>The answer is currently being computed.</p>
</ng-template>
<ld-loadable [loadable]="loadable">
<h3>Loaded</h3>
<pre>{{ loadable | loadedValue | json }}</pre>
</ld-loadable>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { Loadable } from 'projects/ngx-loadable/src/lib/loadable.type';
@Component({
selector: 'app-custom-loading-template-example',
templateUrl: './custom-loading-template-example.component.html',
styleUrls: ['./custom-loading-template-example.component.css'],
})
export class CustomLoadingTemplateExampleComponent {
loadable: Loadable<object> = idle;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ <h2>Default usage example</h2>
`LoadableModule` is imported with the default loading and error components.
</p>
<app-load-form (loadable)="loadable = $event"></app-load-form>
<div>
<h3>State of the loadable</h3>
<pre>{{ loadable | json }}</pre>
</div>
<ld-loadable [loadable]="loadable">
<h3>Loaded</h3>
<pre>{{ loadable | loadedValue | json }}</pre>
Expand Down
10 changes: 7 additions & 3 deletions projects/example-app/src/app/load-form/load-form.component.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, EventEmitter, Output } from '@angular/core';
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { toLoadable } from 'projects/ngx-loadable/src/lib/functions/to-loadable.function';
import { Loadable } from 'projects/ngx-loadable/src/public-api';
import { Subject } from 'rxjs';
Expand All @@ -11,14 +11,14 @@ import { FormBuilder } from '@angular/forms';
templateUrl: './load-form.component.html',
styleUrls: ['./load-form.component.css'],
})
export class LoadFormComponent {
export class LoadFormComponent implements OnInit {
@Output() loadable = new EventEmitter<Loadable<unknown>>();

load$ = new Subject<{ id: number; error: boolean }>();

form = this.fb.group({
isError: [false],
loadingTime: [1000],
loadingTime: [2000],
});

constructor(private loadService: LoadService, private fb: FormBuilder) {
Expand All @@ -33,6 +33,10 @@ export class LoadFormComponent {
.subscribe(this.loadable);
}

ngOnInit(): void {
this.load$.next({ id: 42, error: this.form.value.isError });
}

load(id: number): void {
this.load$.next({ id, error: this.form.value.isError });
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {
AfterViewInit,
Component,
ComponentFactoryResolver,
ComponentRef,
Expand All @@ -16,7 +17,7 @@ import {
hasErrored,
isLoaded,
} from '../../loadable.functions';
import { Loadable } from '../../loadable.type';
import { Loadable, LoadingState } from '../../loadable.type';
import { DEFAULT_COMPONENTS } from '../loadable.tokens';
import { DefaultComponents } from '../module.options';

Expand Down Expand Up @@ -53,7 +54,7 @@ export type TemplateRefs = {
templateUrl: './loadable.component.html',
styleUrls: ['./loadable.component.css'],
})
export class LoadableComponent implements OnChanges {
export class LoadableComponent implements OnChanges, AfterViewInit {
@Input() loadable: Loadable<unknown> = idle;
@Input() templates: TemplateRefs = {};

Expand All @@ -65,22 +66,27 @@ export class LoadableComponent implements OnChanges {
showNgContent = false;
templateContext?: object;

get loadingState(): LoadingState {
return getLoadingState(this.loadable);
}

constructor(
private resolver: ComponentFactoryResolver,
@Inject(DEFAULT_COMPONENTS) private defaultComponents: DefaultComponents
) {}

updateContent(loadable: Loadable<unknown>): void {
const defaultComponent = this.defaultComponents[getLoadingState(loadable)];
if (defaultComponent && this.content) {
updateContent(): void {
const defaultComponent = this.defaultComponents[this.loadingState];
if (!this.templateRef && defaultComponent && this.content) {
this.content.clear();
const factory = this.resolver.resolveComponentFactory(defaultComponent);
this.defaultComponentRef = this.content.createComponent(factory);
setComponentInputs(this.defaultComponentRef, loadable);
setComponentInputs(this.defaultComponentRef, this.loadable);
}
}

ngOnChanges(changes: SimpleChanges): void {
console.log('ngOnChanges', this.loadable, this.templates);
if ('loadable' in changes) {
this.showNgContent = isLoaded(this.loadable);
this.templateContext = {
Expand All @@ -90,13 +96,14 @@ export class LoadableComponent implements OnChanges {
}
if ('loadable' in changes || 'templates' in changes) {
this.defaultComponentRef?.destroy();
const loadingState = getLoadingState(this.loadable);
if (loadingState !== 'loaded') {
this.templateRef = this.templates[loadingState];
if (!this.templateRef) {
this.updateContent(this.loadable);
}
if (this.loadingState !== 'loaded') {
this.templateRef = this.templates[this.loadingState];
this.updateContent();
}
}
}

ngAfterViewInit(): void {
this.updateContent();
}
}

0 comments on commit 3487281

Please sign in to comment.