@chamwic (Chamwic) posted a new topic, subject "Once rendered the click function is not available". It read:

   I do some string manipulations and wanna create a string like below. [sample] and [express] are hyperlinks.
    
    `<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>`
    [code] 
        buildNavigationSearchElement(elementText: String){
            let retElem = elementText + '<a href="#" (click)="searchFromURL();">Search Text</a>';
            return retElem;
          }
        
    [/code]
    
    Is there any other way to accomplish this?

@rapropos (Robert Coie) replied

    chamwic:
    
    > Is there any other way to accomplish this?
    
    Yes.

To which @chamwic (Chamwic) replied

    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
    [code] 
        <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>
        
    [/code]

Then @chamwic (Chamwic) said

    Finally I came up with this solution. As follows the hyperlink is generated.
    
    **home.page.html**
    [code] 
        <div [innerHTML]="buildNavigationSearchElement()"></div>
        
    [/code]
    
    **home.page.ts**
    [code] 
        buildNavigationSearchElement(){
        let myText = This is a + '<a class="myhyperlink_1">sample</a>' + text to + '<a class="myhyperlink_2">express</a>' + my issue.
        return myText;
        }
        
    [/code]
    
    Inside `ngAfterViewChecked()` event each and every hyperlink is bound to a class method.
    [code] 
        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));
           }
        }
        
    [/code]
    
    Property array is stored in class with actions and parameters for each hyperlinks.
    [code] 
        openAlert(parameter: any) {
           let className = parameter.srcElement.className;
           //do what ever required
        }
        
    [/code]


{'source': 'discourse', 'url': 'https://forum.ionicframework.com/t/once-rendered-the-click-function-is-not-available/206999', 'title': 'Once rendered the click function is not available', 'views': 323, 'has_accepted_answer': False, 'word_count': 377, 'like_count': 0, 'reply_count': 2, 'participant_count': 2, 'posts': 4, 'tags': '', 'author': '@chamwic (Chamwic)', 'participants': '@chamwic (Chamwic), @rapropos (Robert Coie)', 'image_url': ['https://global.discourse-cdn.com/ionicframework/original/3X/6/0/60a12811df7034a4fff2bf5250a2b769e4cb3869.jpeg'], 'created_at': '2021-03-23T07:26:28.499Z', 'last_posted_at': '2021-03-31T01:32:19.997Z'}