Within my app-landing component, I have implemented multiple typeOut directives. These directives are responsible for gradually writing out text within their respective elements. While this functionality is working as intended, I now seek to exert control over the order in which the text is written.
My goal is to enable the app-landing component (or any parent component containing typeOut directives) to maintain an array of these directives. This array should facilitate the ability to invoke each directive's function to sequentially write out text.
Despite my attempts with inputs, outputs, and services, I find myself unsure of the correct approach.
landing.component.ts
<h1 class="fontSize1">
<p style="display:none;">{{title.string}}</p>
<strong>
<pre typeOut="{{title.ascii}}" typeClump="10" typeOrder="1" typeDelay="0.1"></pre>
</strong>
</h1>
<h2 class="fontSize1">
<p style="display:none;">{{subtitle.string}}</p>
<pre typeOut="{{subtitle.ascii}}" typeOrder="1" typeDelay="1"></pre>
</h2>
</header>
<aside class="portrait">
<pre class="fontSize2" typeOut="{{portrait.ascii}}" typeClump="10" typeOrder="1" typeDelay="0.1"></pre>
</aside>
type-out.directive.ts
import { Directive, Input, ElementRef, Output, EventEmitter } from '@angular/core';
import { delay, asyncForEach } from '../async';
export interface typeOutObj { order: number, write: any, finished: boolean };
@Directive({
selector: '[typeOut]'
})
export class TypeOutDirective {
private dom;
@Input('typeOut') text: string;
@Input('typeClump') clump: number;
@Input('typeOrder') order: number;
@Input('typeDelay') delay: number;
@Output() typeObj = new EventEmitter<typeOutObj>();
typeFinished: boolean;
charArr = [];
write = async () => {
let clump = {
max: this.clump == undefined ? 0 : this.clump,
current: 0
}
await asyncForEach(this.charArr, async (char) => {
if (this.typeFinished == false) {
if (clump.current >= clump.max) {
clump.current = 0;
await delay(this.delay == undefined ? 0 : this.delay);
}
clump.current++;
this.dom.innerHTML += char;
}
});
}
constructor(el: ElementRef) {
this.dom = el.nativeElement;
this.dom.innerHTML = '';
this.typeFinished = false;
}
ngAfterContentInit() {
this.charArr = this.text.split('');
}
ngAfterViewInit(): void {
this.write().then(() => {
this.typeFinished = true;
this.typeObj.emit({
order: this.order,
write: this.write(),
finished: this.typeFinished
});
});
}
ngOnInit() {
}
}
type-out.service.ts (not sure if I'm going right with this one)
import { Injectable, Input } from '@angular/core';
import { typeOutObj } from './type-out.directive';
@Injectable({
providedIn: 'root'
})
export class TypeOutService {
@Input() typeOut: typeOutObj;
typeOuts: [typeOutObj];
constructor() {
}
}