When we’re working with long strings in application user interfaces
it distracts the user interfaces. Here is the example
In the above example there is paging grid with 10 rows per page.
The better way to represent the data, we can show first 250 characters for much
better user experience.
Solution for overcome of this sort of problems is provided some
of the data to get the idea.(or else without showing it J) , we can provide a link with
having two options. Showing more or less link with the paragraph (default less)
and user can toggle it.
Ok , now let come to development in angular. In angular we
can use pipes for that but their some limitation to do that. In this example I’m
going to component for that and reuse it. We can use Parent and Child component with
@Input for this.
ParentComponent.html
ChildComponent.html
ChildComponent.ts ("app-show-more" selector)
How to use it using npm package Step 1 :Install npm package npm install show-less-more-string Step 2 : import module import { ShowLessMoreStringModule} from 'show-less-more-string';
imports: [
BrowserModule,
AppRoutingModule,
ShowLessMoreStringModule
]
Step 3 :How to use <app-show-more[_longString]='YourString'[_length]=25> </app-show-more>
