CODEWITHSUNDEEP
javascriptjqueryhtmlangularangular-ng-if
felixo
felixo

Reputation: 1613

How can I show a component after execution of a function?

I have a service that regulates true/false which depending shows and hides the components through *ngIf! At the moment, when I click the button the service renders true, and the components appear right at that moment!

I need them to appear only after a function has been fully executed! That is I need the page to scroll to the top, then only show the components.

this is my slideshow component, with a button, when clicked tells the content.service true.

onGoToAbout(event) {
    $(event.target.id).toggle();
    $("#slideshow").slideUp(1500);
    this.content.isContentShown = true;
}
<div class="explore-wrapper" (click)="onGoToAbout($event)" routerLink="/about">

When the content.service is true the header component appears:

<header class="sticky" *ngIf="header.isContentShown">
    <div class="header-container">
        <div class="header-left">
            <h1>{{pageTitle}}</h1>
        </div>
        <div class="header-right">
            <app-burger></app-burger>
        </div>
    </div>
</header>
<app-nav (sendTitle)="getTitle($event)"></app-nav>

I need the header to show only after, the page has scrolled up to the top!

Upvotes: 0

Views: 56

Answers (1)

MoxxiManagarm
MoxxiManagarm

Reputation: 9124

Try this

$('#slideshow').slideUp(1500, function() {
   this.content.isContentShown = true;
});

Upvotes: 1

Related Questions