Goal: animate fadein an element with Typescript in Angular using
document.getElementById("elementID").animate
I used the example (changed it a bit) from developer.mozilla.org
Expected: to work without errors.
Actual results: code works but has Chrome developer errors.
Chrome error details:
core.js:3838 ERROR TypeError: Cannot read property 'animate' of null
at PlywoodHebComponent.push../src/app/components/plywood-heb/plywood-heb.component.ts.PlywoodHebComponent.fadeIn (plywood-heb.component.ts:22)
at PlywoodHebComponent.push../src/app/components/plywood-heb/plywood-heb.component.ts.PlywoodHebComponent.getChildEvent (plywood-heb.component.ts:18)
at PlywoodHebComponent_Template_app_plywood_side_navbar_stringOutput_2_listener (template.html:3)
at executeListenerWithErrorHandling (core.js:14739)
at wrapListenerIn_markDirtyAndPreventDefault (core.js:14774)
at SafeSubscriber.schedulerFn [as _next] (core.js:24856)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:192)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:130)
at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:76)
at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53)
UPDATE:
What I tried: I saw that if I erase the *ngIf , the problem is gone. What means that the element is being checked for it's id on the fadeIn() before it appears in the DOM. I think I should use visibility instead of *ngIf.
Some code:
HTML:
<nav class="sidebar">
<text-style2-container>
<app-plywood-side-navbar (stringOutput)=getChildEvent($event)></app-plywood-side-navbar>
</text-style2-container>
</nav>
<article>
<div class="description-text" *ngIf="imageName=='twin';">
<text-style1-container>
<app-twin-heb></app-twin-heb>
</text-style1-container>
</div>
<div class="description-text" *ngIf="imageName=='okoume';">
<text-style1-container>
<app-okoume-heb></app-okoume-heb>
</text-style1-container>
</div>
<div class="description-text" *ngIf="imageName=='birch';">
<text-style1-container>
<app-birch-heb></app-birch-heb>
</text-style1-container>
</div>
</article>
<div class="image-box" *ngIf="imageName;">
<!-- "image" id element is fading in using the typescript but has errors on chrome developer mode -->
<img id="image" src="../../../assets/images/plywoods/{{imageName}}-plywood.jpg" alt="{{imageName}} plywood">
</div>
Typescript:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-plywood-heb',
templateUrl: './plywood-heb.component.html',
styleUrls: ['./plywood-heb.component.css']
})
export class PlywoodHebComponent {
imageName: string;
getChildEvent($event) {
this.imageName = $event;
this.fadeIn();
}
fadeIn(): void {
document.getElementById("image").animate([
// keyframes
{ opacity: '0' },
{ opacity: '1' }
], {
duration: 2000,
});
}
}
CSS:
.sidebar, .image-box, .description-text, img {
box-sizing: border-box;
float: right;
}
.sidebar, .image-box, .description-text {
text-align: right;
padding-top: 150px;
}
.sidebar {
width: 15%;
padding-right: 50px;
}
.image-box, .description-text {
width: 40%;
}
.image-box {
margin-top: 2rem;
}
img {
width: 50%;
padding-right: 100px;
/* fading in animation for autoran plywood route */
animation-name: fadeInAnimation;
animation-duration: 5s;
}
.description-text {
text-align: right;
padding-right: 100px;
}
@keyframes fadeInAnimation {
from { opacity: 0;}
to { opacity: 1;}
}
Edit: attaching also index.html as it doesn't have js In it.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>אורי גרוס עצים ולבידים</title>
<base href="/">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body dir="rtl">
<app-Layout></app-Layout>
</body>
</html>
@MikeOne : I found the solution for my code. @Arunkumar Ramasamy : Thank you for showing me what to check. I fixed it by changing my html code after understanding that the *ngIf is causing the problem and I might just hide the element and not to destroy it. So I changed just the display of the element. I attach the html code: