How to trigger click on an HTML file element from a component ? (Angular 2)

Question

I am very new to Angular 2 the question is How to trigger click on an HTML file element from a component?

  rankingFilter() {

    this.RepsloaderShow = true;
    this.reps = [];
    var data = {
        from: this.fromFilter,
        to: this.toFilter,
        user_search: this.user_search
    }
    this.http.post(CONSTANTS.baseApiUrl + 'reports/rankings_individuals', data)
        .map(res => res.json())
        .subscribe((data) => {
            this.reps = data;
            this.RepsloaderShow = false;
            // Trigger click here

        });
}

HTML File (click event on class='rep')

    <ul class="carousel-indicators section-nav">
        <li class=" icon_0 icon active rep" data-target="#slideable" data-slide-to="0">
            <span class='shh'>Reps</span>
            <p style="display: none;">Reps</p>
        </li>
        <li class="icon_0 icon team" data-target="#slideable" data-slide-to="1">
            <span class='shh'>Teams</span>
            <p style="display: none;">Teams</p>
        </li>
        <li class="icon_0 icon award" data-target="#slideable" data-slide-to="2">
            <span class='shh'>Class Ranks</span>
            <p style="display: none;">Class Ranks</p>
        </li>
    </ul>

Answer 1

For dispatching from the host element

constructor(private elRef:ElementRef, private renderer:Renderer) {}

For dispatching from an element inside the template

<some-elem #target></some-element>

@ViewChild('target') elRef:ElementRef;

And then dispatch the event:

  ...
    this.renderer.invokeElementMethod(this.elRef.nativeElement, 
        'dispatchEvent', 
        [new MouseEvent('click', { bubbles: true, cancelable: true })]);