1.0.0 • Published 7 years ago
ngx-read-more v1.0.0
Read More(toogle text) directive for angular2
At first step you need mark your text-div and get him id like "read-more" if in you need use it with ngFor - "read-more{{i}}"
@Component({ selector: 'app-root', template: `
<p #textContent id="read-more">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident reiciendis voluptate
</p>
<div class="read-more-link">
<a readMore [readMore-length]="430" [readMore-element]="textContent">
<span class="less">Less <i class="fa fa-angle-right" aria-hidden="true"></i></span>
<span class="more">More <i class="fa fa-angle-right" aria-hidden="true"></i></span>
</a>
</div>
`, styleUrls: './app.component.css' }) export class AppComponent { title = 'app works!'; }
Then create your button event element
- Add attribute "read more"
- Set length of text that we need show by default
- Set element that we need cut
- Here is your buttons less and more u can inset whetewer but there are must be 2 elements with classes ".more" and ".less"
1.0.0
7 years ago