As the title suggests, I am trying to add a class to a div element after the page is load! I have a condition isTrue, and the angular function ngAfterViewInit() that executes after the page is loaded making isTrue value to be true, then adding the class hideOnLoad. Of course I could use standard javascript or jquery, but I must do it the angular way. Essentially the end result should be that, the div.index-logo-wrapper fades out slowly after the page is load. My idea was to add a class once its loaded that gradually decreases the opacity You input is much appreciated.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-index-section',
templateUrl: './index-section.component.html',
styleUrls: ['./index-section.component.scss']
})
export class IndexSectionComponent implements OnInit {
isTrue: boolean = false;
public innerWidth: any;
constructor() { }
ngOnInit() {
}
ngAfterViewInit() {
this.innerWidth = window.innerWidth;
if (this.innerWidth < 1000) {
this.isTrue = true;
alert(this.isTrue);
}
}
}
<section class="index-section">
<div class="index-logo-wrapper" [class.hideOnLoad]="isTrue">
<figure>
<img src="assets/icons/logo_mobile.svg" alt="urbanwheels logo">
</figure>
</div>
<div class="index-media-wrapper">
<div class="media-container">
<iframe src="https://player.vimeo.com/video/128014070?autoplay=1&color=ffffff&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque contra est, ac dicitis; Duo Reges: constructio interrete. Videsne quam sit magna dissensio?
</p>
</div>
</div>
</section>
Back