Once rendered the click function is not available

Ionic Framework
1

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?

2

Yes.

3

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>
4

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