eliasbf / angular-typing-animation Goto Github PK
View Code? Open in Web Editor NEWAngular 4 Typing Animation Directive
License: MIT License
Angular 4 Typing Animation Directive
License: MIT License
Hey,
If I place an element like
<span typingAnimation [typeSpeed]="20" [startDelay]="0" [hideCursorOnComplete]="true">Typing Angular Animation</span>
it works, but when I use translate pipe from ngx-translate, the animation does not happen.
example:
<span typingAnimation [typeSpeed]="20" [startDelay]="0" [hideCursorOnComplete]="true">{{ 'TYPING_TITLE' | translate }}</span>
*Translate -> @ngx-translate/core version 9.1.1
Is it not supported?
Thanks
Angular Typing Animation Version 0.5.4
Angular CLI - Angular 5.2.0
Hi,
I just checked out this package so I tried out the example in the documentation.
(https://embed.plnkr.co/CefhwrE7yFLAciY7ZsPU/)
It however didnt work (I think) and it threw this error in the console.
Unhandled Promise rejection:
wrapFn@https://unpkg.com/[email protected]?main=browser:647:29
ZoneDelegate.prototype.invokeTask@https://unpkg.com/[email protected]?main=browser:236:37
Zone.prototype.runTask@https://unpkg.com/[email protected]?main=browser:136:47
ZoneTask/this.invoke@https://unpkg.com/[email protected]?main=browser:304:33
Error loading https://unpkg.com/rxjs/operators.js as "rxjs/operators" from https://unpkg.com/@angular/core/bundles/core.umd.js
; Zone:
<root>
; Task:
Promise.then
; Value:
Error {stack: null, originalErr: Error, constructor: Object}
null
resolvePromise@https://unpkg.com/[email protected]?main=browser:429:31
Hi
How can I use with dynamic text?
For example,
<span typingAnimation [typeSpeed]="50" [condition]="start" [startDelay]="1000">
{{test}}
</span>
And in my component
@Component({...})
export class MyComponent implements OnInit {
test = 'abcdefg';
...
}
It seems not working with dynamic text.
Let me know if I missed anything.
Thanks!
Hi,
thanks for your effort.
Could you also give the possibility to adjust the cursor size?
Thanks a lot and kind regards
Marc
Hi. I found a err message.
I tried ng build --prod but It can't
message is
Type TypingAnimationDirective in
MyFolder/node_modules/angular-typing-animation/typing-animation.directive.d.ts
is part of the declarations of 2 modules: AppModule in
MyFolder/src/app/app.module.ts
and
TypingAnimationModule in MyFolder/node_modules/angular-typing-animation/typing-animation.module.d.ts!
Please consider moving TypingAnimationDirective
in MyFolder/node_modules/angular-typing-animation/typing-animation.directive.d.ts
to a higher module that imports AppModule in MyFolder/src/app/app.module.ts and TypingAnimationModule in MyFolder/node_modules/angular-typing-animation/typing-animation.module.d.ts.
You can also create a new NgModule that exports and includes
TypingAnimationDirective in MyFolder/node_modules/angular-typing-animation/typing-animation.directive.d.ts
then import that NgModule in AppModule in MyFolder/src/app/app.module.ts and TypingAnimationModule in MyFolder/node_modules/angular-typing-animation/typing-animation.module.d.ts.
Could you help me ??
When serving the angular application using Angular 6 CLI, the app fails to compile, giving the following error message:
ERROR in node_modules/angular-typing-animation/typing-animation.directive.d.ts(3,10): error TS2305: Module '"..../node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/angular-typing-animation/typing-animation.directive.d.ts(4,10): error TS2305: Module '"....node_modules/rxjs/Subscription"' has no exported member 'Subscription'.
node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.
node_modules/rxjs/Subscription.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Subscription'.
This can be solved by changing line 3 in the typing-animation.directive.js file from:
import { Observable } from 'rxjs/Observable';
to simply:
import { Observable } from 'rxjs';
AND changing lines 3 and 4 in typing-animation.directive.d.ts from:
import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';
to
import { Observable } from 'rxjs';
import { Subscription } from 'rxjs';
I would like to be able to use one element with string interpolation and rerun the animation whenever the variable changes? I don't believe that is possible currently. You would have to use multiple elements. Is that true?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.