I am trying to create a terms and conditions page where I have 'I Agree' button which should be disabled when the user is at the top/middle of the page. When the user reaches the end of the page the button should be enabled. For that I want to have Hostlistner/Directive/event binding which will listen to scroll and get the position of the scroll and inform when it reaches at bottom and enable I agree button. Is there any other way of doing it? I am new to angular. Thanks in advance
my html
<div class="modal-body" #agreement>
<h6 class="inittext">You must scroll to the end of the terms and conditions And press "Agree"
to continue with your request.</h6>
<p style="font-weight:bold">Lorem ipsum dolor sit amet<br></p>
<p> consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ac ut consequat semper viverra nam libero justo laoreet.
Amet massa vitae tortor condimentum. Aliquam sem et tortor consequat id porta nibh venenatis
cras. Sed id semper risus in hendrerit gravida rutrum quisque.<br></p>
<p style="font-weight:bold"> Fermentum posuere urna <br></p>
<p>nec tincidunt praesent semper feugiat. Ullamcorper malesuada proin libero nunc consequat
interdum varius. Habitasse platea dictumst quisque sagittis purus sit amet. Dictum non
consectetur a erat nam. Duis tristique sollicitudin nibh sit amet commodo.
Tincidunt tortor aliquam nulla facilisi cras fermentum. Massa sapien faucibus
et molestie ac.</p>
<p style="font-weight:bold">Mi bibendum <br></p>
<p> neque egestas congue quisque egestas diam in. Aliquet porttitor lacus luctus
accumsan tortor posuere ac ut. Odio tempor orci dapibus ultrices in iaculis nunc. Sit amet
venenatis urna cursus eget.<br></p>
<p>Eget magna fermentum iaculis eu non diam. Enim praesent
elementum facilisis leo vel. Quam nulla porttitor massa id neque aliquam vestibulum. Arcu
cursus vitae congue mauris. Tempus quam pellentesque nec nam aliquam sem et tortor. Rhoncus
est pellentesque elit ullamcorper dignissim cras tincidunt lobortis.<br></p> <p> Tristique senectus et
netus et malesuada. Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum.
Sed risus ultricies tristique nulla aliquet enim tortor. Nunc non blandit massa enim nec
dui nunc. Purus gravida quis blandit turpis cursus in hac habitasse platea.</p>
<h6 class="inittext">You must press "Agree" to continue with your request.</h6>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" style="float: left">Save as PDF</button>
<button type="button" class="btn btn-outline-primary">Disagree</button>
<button type="button" class="btn btn-primary" disabled>Agree</button>
</div>
My ts file
import { Component,ElementRef, ViewChild, HostListener, AfterViewInit } from '@angular/core';
@Component({
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {
@ViewChild('agreement') agreement : ElementRef;
}
