Once rendered the click function is not available

I do some string manipulations and wanna create a string like below. [sample] and [express] are hyperlinks.

sample

<a> element should have click function and it should call searchFromURL(). Once it is rendered, the click function is not available, what may be the reason for this.

<ion-row innerHTML="{{buildNavigationSearchElement(dicDat.translation)}}"></ion-row>

buildNavigationSearchElement(elementText: String){
    let retElem = elementText + '<a href="#" (click)="searchFromURL();">Search Text</a>';
    return retElem;
  }

Is there any other way to accomplish this?

Yes.

Thank you. Sorry I’m new to ionic and angular.
But my output is dynamic. Is it possible do below conversion with component template?

dicDat.translation data could be like follows.
e.g: (1)
Proximal palmar skin line << conventional middle palmar crease >>
@→ thenar crease@

When displaying, the text is covered with @ marks will become a url like below

Proximal palmar skin line << conventional middle palmar crease >>
→ thenar crease

(2)
@→ rotation flap@, @rotationnal flap@

will become

→ rotation flap, rotationnal flap

<div>
     <ion-grid>
       <ion-row *ngFor="let dicDat of dicData">
         <ion-col>{{dicDat.term}}</ion-col>
         <ion-col *ngIf="dicDat.type == 0 || dicDat.type == 1 || dicDat.type == 2">{{dicDat.translation}}</ion-col>
         <ion-col *ngIf="dicDat.type == 3">
           <ion-row innerHTML="{{buildNavigationSearchElement(dicDat.translation)}}"></ion-row>
         </ion-col>
       </ion-row>
     </ion-grid>
</div>

Finally I came up with this solution. As follows the hyperlink is generated.

home.page.html

<div [innerHTML]="buildNavigationSearchElement()"></div>

home.page.ts

buildNavigationSearchElement(){
let myText = This is a + '<a class="myhyperlink_1">sample</a>' + text to + '<a class="myhyperlink_2">express</a>' + my issue.
return myText;
}

Inside ngAfterViewChecked() event each and every hyperlink is bound to a class method.

ngAfterViewChecked() {
   var myElements = 
   this.elementRef.nativeElement.querySelectorAll('[class^="myhyperlink"]');
   var i: number;
   for (i = 0; i < myElements.length; i++) {
       myElements[i].addEventListener('click', this.openAlert.bind(this));
   }
}

Property array is stored in class with actions and parameters for each hyperlinks.

openAlert(parameter: any) {
   let className = parameter.srcElement.className;
   //do what ever required
}
1 Like