<div *ngFor="let item of items">
<div>Title</div>
<div class="show-more" (click)="toggleContent(item)">Show more</div>
<div class="extra-content" [hidden]="!item.showContent">
<p>lorum ipsum bla bla bla</p>
</div>
</div>
How can you toggle the extra content div by clicking on the show-more div element in a way that is unique to each item in the collection.
Avoid using a global variable as it would trigger all the items in the collection simultaneously.
Include a new attribute show in each item, as demonstrated below
items = items.map(item => ({...item, show: false}))and then toggle it when clicked.
<div *ngFor="let item of items">
<div>Title</div>
<div class="show-more" (click)="item.show = !item.show">Show more</div>
<div *ngIf = "item.show" class="extra-content">
<p>lorum ipsum bla bla bla</p>
</div>
</div>
this action uniquely sets the show attribute for each row / item
Is there a way to automatically change the background of a page when it loads, instead of requiring a button click? import img1 from '../images/img1.jpg'; import img2 from '../images/img2.jpg'; import img3 from '../images/img3.jpg& ...
After moving the label after the checkbox, this CSS selector is now working. input[type=checkbox]:checked + label { color: red; } <input type="checkbox"><label>Checkbox1</label> However, I want the checkbox to also ...
I am a newbie to the AngularJS 2 framework and I've hit a roadblock! I am trying to deploy an application (like a quickstart) on a Windows Server 2012 where Apache Tomcat is already installed. Here's what I have done so far: I used the "npm buil ...
Struggling to make observables work has been quite the challenge for me lately. My code now resembles a chaotic battleground rather than the organized structure it once was. The dreaded "ERROR TypeError: Cannot read property 'map' of undefined" ...
I have a design concept that I'm trying to bring to life. I'm struggling with figuring out how to add another "stretchy div" to the layout. I want this second div to expand to fill all remaining vertical space on the screen without causing it to ...
Transitioning to RC6, I find myself in the need to programmatically bootstrap my application. Previously, I would simply call bootstrap from platform-browser-dynamic, but it seems to be no longer available. Can someone guide me on how to achieve this now ...
Currently, I am utilizing a tutorial for graph tooltips and finding it to be very effective: http://bl.ocks.org/d3noob/c37cb8e630aaef7df30d It is working seamlessly for me! However, I have encountered a slight problem... In the tutorial, the graph disp ...
Hello, I'm an advanced beginner so I appreciate your patience:) I've had success removing checkboxes and styling their labels when the for="" attribute is present. However, I'm facing a challenge with a form where the labels wrap the input ...
Is it possible to save a JSON object as a file on the desktop using JavaScript and HTML only? If so, how can this be done, and how can the file be read back afterwards? var canvas = new fabric.Canvas('c'); data = JSON.stringify(canvas) I am wor ...
import { Observable } from 'rxjs/internal/Observable'; export function createHttpObservable(url: string) { console.log('Url is', url); return Observable.create(observer => { fetch(url) .then(response => { ...
http://jsfiddle.net/HVGre/1/ - check out this test link. I have a link in my HTML code that needs to be clickable dynamically. While it functions well with the .click() method in Internet Explorer, it fails in Firefox. Unfortunately, changing the link to ...
Is it possible to apply a CSS class defined in css1.css to another HTML class defined in css2.css? In css1.css: div.classPredefined { border: solid 1px #000; } In css2.css: div.newClass { background: #CCC; /*apply-class: classPredefined;*/ } Although ...
When creating a list of possible products for users to buy, I use the ul tag combined with li. Each product element includes a checkbox that allows users to select the product or not. For products with related information, I want to store this data in a h ...
Why is the CSS property text-overflow: ellipsis not working on a child div with the class name cluster-name? .ft-column { flex-basis: 0; flex-grow: 1; padding: 4px; text-overflow: ellipsis; overflow: hidden; } .ft-column > .cluster-name { ...
My objective is not to avoid incorporating code (such as JavaScript) here, but rather to create a specific tool. Imagine I have a URL string like domain.com/something, which can produce either a single string like "John", or potentially JSON data dependin ...
Trying to grasp WebRTC has been quite the journey for me. In an attempt to troubleshoot my failed video transfer between computers, I uploaded what I have so far onto a temporary github repository: https://github.com/stevendesu/webrtc-failure My goal is ...
Whenever I submit a form by clicking on the "send message" button, I want to display an Alert message using jQuery. However, currently, I have to double click for the alert message to appear. How can I make it so that the alert message is shown with just o ...
I am facing a challenge that I can't seem to overcome. I need to create a game using HTML, CSS, and JS. The concept involves a grid where upon entering a number into a text box, a picture of a cartoon character is displayed in a square which turns gre ...
Currently, I am developing an internal Java web application for my company. The application requires the ability to automatically print a dynamically generated HTML file without any prompts when a specific button is clicked. In addition, the goal is to ens ...
In my view, I have a model representing a list of items. Each item has a unique ID, which is included in the H2 header tag. The details of each item are displayed in a div below the header. Initially, there is an image within the header that is set to disp ...