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.
angular bootstrap-4 angular6
New contributor
add a comment |
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.
angular bootstrap-4 angular6
New contributor
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
add a comment |
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.
angular bootstrap-4 angular6
New contributor
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
angular bootstrap-4 angular6
New contributor
New contributor
New contributor
asked yesterday
Amol
13
13
New contributor
New contributor
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
add a comment |
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
add a comment |
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.
add a comment |
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.
add a comment |
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.
add a comment |
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.
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.
answered yesterday
SiddAjmera
9,98721137
9,98721137
add a comment |
add a comment |
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.
Amol is a new contributor. Be nice, and check out our Code of Conduct.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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