Click event is not working in dynamically generated HTML from typescript

Please find my code and help me out if there is any mistake in my code.

Controller.ts

Generating dynamic HTML code:

    Maintitle = Maintitle + " " + "<a href='javascript:void(0);' id='code-links' (click)='clickLinks();'>" + item.code[0] + "</a>";



      ngAfterViewInit() {
           if (this.elementRef.nativeElement.querySelector('#code-links')) {
                this.elementRef.nativeElement.querySelector('#codelinks').addEventListener('click', this.clickLinks.bind(this));
                }
            }

Pipe:

    import { Pipe, PipeTransform } from '@angular/core';
    import { DomSanitizer } from '@angular/platform-browser';
    @Pipe({
        name: 'safeHtml'
    })
    export class SafeHtmlPipe implements PipeTransform {
    constructor(private sanitized: DomSanitizer) { }
        transform(value) {
        return this.sanitized.bypassSecurityTrustHtml(value);
         }

    }

HTML:

     <ul class="list-group list-group-code subTerms">
                <li class="result-success list-group-item strong" *ngFor="let item of xmlTabularContentFinal">
                  <span class="text-muted font-weight-normal"><span> <span [innerHTML]="item.title| safeHtml"></span></span></span>
                </li>
              </ul>

While I inspect the elements I could see the event is binding in the html. But the event is not triggered when I click the link.