Angular 2 Read More Directive

Question

I need to build a readmore directive in Angular2. What this directive will do is for collapse and expand long blocks of text with \"Read more\" and \"Close\" links. Not on t

Answer 1

Again i solved these types of problem with dynamic data and full controlling.

 

   

      
         {{personalBasicModel.professionalSummary | slice:0:200}} ...
    
     {{personalBasicModel.professionalSummary }}

 
 

Here , personalBasicModel.professionalSummary contain string . like any text.
slice:0:200 = use slice pipe for splice string with 200 character length . you can be change length according your requirement. id="dots" & id="more" two important thing.

            
                {{showLess_More}}
            
        

Here we define a button with dynamic text (see more and see less ) with click event.

//---------------------------------- ts file -----------------------------------//

Define variable

showLess_More : string = "SEE MORE...";
paasValueOn_SeeMoreBtn : boolean = true;

Event(Method) fire when user click on see more button

 showMore(data:boolean){
    if(data){
      $("#dots").css('display', 'none');
      $("#more").css('display', 'inline');
      this.showLess_More = "SEE LESS ...";
      this.paasValueOn_SeeMoreBtn = false;
    }else{
      $("#dots").css('display', 'inline');
      $("#more").css('display', 'none');
      this.showLess_More = "SEE MORE...";
      this.paasValueOn_SeeMoreBtn = true;

    }

  }