How will achive content show more and show less in angular 6











up vote
-1
down vote

favorite












We have 6 content div. And also we using character limit each div.
We used bootstrap 4 angular 6 version.



6 div some toggle div content opened and some closed
How to achive this case.










share|improve this question







New contributor




Amol is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
















  • 1




    There is nothing related to Angular, you can search for simple javascript hack for the same. just for ref. you can have a look here w3schools.com/howto/tryit.asp?filename=tryhow_js_read_more
    – Pardeep Jain
    yesterday












  • NOT. Use "Angular style", not "javascript style". @Amil, has you try anything?
    – Eliseo
    yesterday










  • Thanks! But we using angular 6.
    – Amol
    yesterday















up vote
-1
down vote

favorite












We have 6 content div. And also we using character limit each div.
We used bootstrap 4 angular 6 version.



6 div some toggle div content opened and some closed
How to achive this case.










share|improve this question







New contributor




Amol is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
















  • 1




    There is nothing related to Angular, you can search for simple javascript hack for the same. just for ref. you can have a look here w3schools.com/howto/tryit.asp?filename=tryhow_js_read_more
    – Pardeep Jain
    yesterday












  • NOT. Use "Angular style", not "javascript style". @Amil, has you try anything?
    – Eliseo
    yesterday










  • Thanks! But we using angular 6.
    – Amol
    yesterday













up vote
-1
down vote

favorite









up vote
-1
down vote

favorite











We have 6 content div. And also we using character limit each div.
We used bootstrap 4 angular 6 version.



6 div some toggle div content opened and some closed
How to achive this case.










share|improve this question







New contributor




Amol is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.











We have 6 content div. And also we using character limit each div.
We used bootstrap 4 angular 6 version.



6 div some toggle div content opened and some closed
How to achive this case.







angular bootstrap-4 angular6






share|improve this question







New contributor




Amol is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.











share|improve this question







New contributor




Amol is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.









share|improve this question




share|improve this question






New contributor




Amol is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.









asked yesterday









Amol

13




13




New contributor




Amol is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.





New contributor





Amol is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.






Amol is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.








  • 1




    There is nothing related to Angular, you can search for simple javascript hack for the same. just for ref. you can have a look here w3schools.com/howto/tryit.asp?filename=tryhow_js_read_more
    – Pardeep Jain
    yesterday












  • NOT. Use "Angular style", not "javascript style". @Amil, has you try anything?
    – Eliseo
    yesterday










  • Thanks! But we using angular 6.
    – Amol
    yesterday














  • 1




    There is nothing related to Angular, you can search for simple javascript hack for the same. just for ref. you can have a look here w3schools.com/howto/tryit.asp?filename=tryhow_js_read_more
    – Pardeep Jain
    yesterday












  • NOT. Use "Angular style", not "javascript style". @Amil, has you try anything?
    – Eliseo
    yesterday










  • Thanks! But we using angular 6.
    – Amol
    yesterday








1




1




There is nothing related to Angular, you can search for simple javascript hack for the same. just for ref. you can have a look here w3schools.com/howto/tryit.asp?filename=tryhow_js_read_more
– Pardeep Jain
yesterday






There is nothing related to Angular, you can search for simple javascript hack for the same. just for ref. you can have a look here w3schools.com/howto/tryit.asp?filename=tryhow_js_read_more
– Pardeep Jain
yesterday














NOT. Use "Angular style", not "javascript style". @Amil, has you try anything?
– Eliseo
yesterday




NOT. Use "Angular style", not "javascript style". @Amil, has you try anything?
– Eliseo
yesterday












Thanks! But we using angular 6.
– Amol
yesterday




Thanks! But we using angular 6.
– Amol
yesterday












1 Answer
1






active

oldest

votes

















up vote
1
down vote













It's very easy to implement with some custom css. Give this a try:



Template:



<div class="container" [class.show]="show">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<button (click)="show = !show">{{ show ? 'Show less': 'Show More' }}</button>


CSS:



.container {
font-size: 16px;
line-height: 16px;
height: 32px;
overflow: hidden;
}

.show {
overflow: visible;
height: auto;
}


Component:



show = false;


Here's a Sample StackBlitz for your ref.






share|improve this answer





















    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });






    Amol is a new contributor. Be nice, and check out our Code of Conduct.










     

    draft saved


    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372022%2fhow-will-achive-content-show-more-and-show-less-in-angular-6%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    1
    down vote













    It's very easy to implement with some custom css. Give this a try:



    Template:



    <div class="container" [class.show]="show">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
    <button (click)="show = !show">{{ show ? 'Show less': 'Show More' }}</button>


    CSS:



    .container {
    font-size: 16px;
    line-height: 16px;
    height: 32px;
    overflow: hidden;
    }

    .show {
    overflow: visible;
    height: auto;
    }


    Component:



    show = false;


    Here's a Sample StackBlitz for your ref.






    share|improve this answer

























      up vote
      1
      down vote













      It's very easy to implement with some custom css. Give this a try:



      Template:



      <div class="container" [class.show]="show">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </div>
      <button (click)="show = !show">{{ show ? 'Show less': 'Show More' }}</button>


      CSS:



      .container {
      font-size: 16px;
      line-height: 16px;
      height: 32px;
      overflow: hidden;
      }

      .show {
      overflow: visible;
      height: auto;
      }


      Component:



      show = false;


      Here's a Sample StackBlitz for your ref.






      share|improve this answer























        up vote
        1
        down vote










        up vote
        1
        down vote









        It's very easy to implement with some custom css. Give this a try:



        Template:



        <div class="container" [class.show]="show">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
        <button (click)="show = !show">{{ show ? 'Show less': 'Show More' }}</button>


        CSS:



        .container {
        font-size: 16px;
        line-height: 16px;
        height: 32px;
        overflow: hidden;
        }

        .show {
        overflow: visible;
        height: auto;
        }


        Component:



        show = false;


        Here's a Sample StackBlitz for your ref.






        share|improve this answer












        It's very easy to implement with some custom css. Give this a try:



        Template:



        <div class="container" [class.show]="show">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
        <button (click)="show = !show">{{ show ? 'Show less': 'Show More' }}</button>


        CSS:



        .container {
        font-size: 16px;
        line-height: 16px;
        height: 32px;
        overflow: hidden;
        }

        .show {
        overflow: visible;
        height: auto;
        }


        Component:



        show = false;


        Here's a Sample StackBlitz for your ref.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered yesterday









        SiddAjmera

        9,98721137




        9,98721137






















            Amol is a new contributor. Be nice, and check out our Code of Conduct.










             

            draft saved


            draft discarded


















            Amol is a new contributor. Be nice, and check out our Code of Conduct.













            Amol is a new contributor. Be nice, and check out our Code of Conduct.












            Amol is a new contributor. Be nice, and check out our Code of Conduct.















             


            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372022%2fhow-will-achive-content-show-more-and-show-less-in-angular-6%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Volksrepublik China

            How to test boost logger output in unit testing?

            Write to the output between two pipeline