How To Expand Content Based On Specific Criteria In Angular

Introduction :

In this tutorial, we’ll learn how to expand content based on specific criteria in angular.you can get the behavior you want by setting the height of a        container element and the line-height of your text on the CSS width and height :

• To begin, you’ll need  to decide a specific criteria for show data in app.component.ts :

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  text = "Show More"
  lastNo = 150;
  count = 150;
  firstCount = 150
  data = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, dolorem animi veniam distinctio sed consectetur excepturi voluptatibus quaerat ullam modi cum, eligendi, quasi porro nihil nobis? Laudantium animi porro pariatur sed dicta, eius ipsum dolore libero itaque adipisci minima eaque sapiente quidem quia consectetur voluptate laboriosam reprehenderit tenetur iste officia dolores nostrum quam! Ipsum, veniam a eum vel cupiditate inventore delectus voluptates reiciendis incidunt tempora ab exercitationem? Iste omnis quos voluptas atque magnam minus, hic tempora corporis repellat suscipit obcaecati beatae temporibus praesentium alias fuga id, modi laborum delectus cumque aut deserunt. At fuga tempore praesentium repudiandae odio dolor reiciendis, neque quas modi maxime dicta doloremque ipsam voluptatem, laboriosam sed corrupti in aliquid perferendis. Natus, alias ratione aspernatur illum unde quas laudantium corporis eveniet. Molestias, consequatur! Ut, debitis, laboriosam odio voluptatem perferendis ullam maxime laudantium, fuga pariatur nihil perspiciatis nostrum illo ducimus. Mollitia atque consequuntur eius voluptates facilis. Expedita nihil obcaecati id, dolore vitae error corrupti. Quo, voluptatibus fuga modi nemo consectetur nam dolor, quos hic nisi deleniti minus aliquid odit facere enim praesentium, ex culpa suscipit nobis excepturi autem omnis beatae unde! Impedit, magni! Hic eum inventore, doloribus consequuntur veniam vel est fuga itaque, cupiditate ut laudantium. Sint, soluta."
}

• In app.component.html :

  <div id="text-box">
    <div class="collapsable float-left"> {{  (data.length>firstCount) ? (data | slice:0:count) : (data) }}
    </div>
    <button class="btn btn-primary" *ngIf="(data.length>100)" (click)="toggleSkil()">{{text}}</button>
  </div>

• In app.component.scss :

#text-box{
  width: 300px;
  box-shadow: 0px 7px 10px -3px grey;
  display: block;
  padding: 10px;
}

Now Run the application and see the output.