Angular 4 on click function - how to use returned value?

Question

I need help with on click function in Angular 4. I've got such an element:

      <mat-cell *matCellDef="let row">
        <span>{{row.messageText | hasString}}</span>
        <span *ngIf="row.messageText && row.messageText.length >= 30"><span class="show-more" (click)="showMore(row)">more</span></span>
      </mat-cell>

I have a string in table cell from row.messageText, which is cut into shorter string by *ngIf directive. If length of the string is too much, I shorten it by substr() function. and display in the table cell. I also add a "more" span to it so I can click on it and expand this string.

And there is my problem - what can I do so I can click on "more" and show entire length of this string? My idea is to bind on click function to span "show more" and return a full string.

This is the function in my component .ts file:

showMore(row) {
  return row.messageText.substr();
}

The function returns full string. How can I apply this to my component.html?

Sajeetharan · Accepted Answer · 2017-11-27 14:13:50Z

1

You can call the function within the expression

<span>{{showMore(row)}}</span>

answered Nov 27, 2017 at 14:13

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ankit Kapoor · Accepted Answer · 2017-11-27 14:39:31Z

1

You can send custom parameter showFullString to your hasString pipe.

@Pipe({name: 'hasString'})
export class hasString implements PipeTransform {
    /**
     *
     * @param value
     * @returns {String}
     */
    transform(value: String, showFullString:Boolean): String {
        if(showFullString) {
          return value;
        }else {
          return value.substr() ; //substring as per your requirement.
        } 
    }
}

This showFullString Boolean can be toggled from showMore method :

showMore(row) {
  this.showFullString = true;
}

answered Nov 27, 2017 at 14:39

Ankit Kapoor

1,75412 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angular 4 on click function - how to use returned value?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related