Develop Reference

Hide button when clicked in angular

I have a button that wraps around an input to upload files to my angular app, I want to add a click event to listen for when the button is clicked and hide it, so every time the button is clicked to upload a file it gets hidden because I intend to replace it with a progress bar.
Here is the code I tried :
<div (click)="fileField.click()" (fileDropped)="upload($event)">
<div *ngIf="this.isButtonVisible">
<button
class="button is-primary mt-2"
(click)="this.isButtonVisible = false"
>
<input
type="file"
name="txts"
#fileField
(change)="upload($event.target.files)"
hidden
multiple
/>
Upload
</button></div>
<!-- Progress Bar -->
<div *ngIf="progress">
<div class="progress is-primary form-group">
<div
class="progress-bar progress-bar-striped bg-success"
role="progressbar"
[style.width.%]="progress"
></div>
</div>
</div>
</div>
I get the following error Property 'fileField' does not exist on type 'SourceComponent'. it has to do with the ngIF how do I fix it?
Thank you in advance.

You're right the issue has to do with the *ngIf. One way of fixing the error is by using the hidden directive to hide the div instead:
<div [hidden]="!this.isButtonVisible">
StackBlitz example

How to make a functional Materialize Search Bar

<nav>
<div class="nav-wrapper green lighten-2">
<form>
<div class="input-field">
<input id="search" type="search" required>
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</div>
</nav>
Hello, I have the above materialize html from the website that initializes the visual component of a searchbar, but as of now it is not very functional. How do I make is so that when I type and search, it redirects me to a specific HTML page?

Use the Angular or React or PHP to make it dynamic,
Using only a HTML you canot make it dynamic.

Framework7 Stepper buttons not working

I inserted a stepper into a mobile webapp based on Framework7:
<div class="stepper stepper-init">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
However, the two plus/minus buttons for in/decreasing the value do not work...do they need to be initialized? Or am I supposed to write the onclick handlers for these buttons myself?
(Of course, I looked into the Framework7 kitchen sink examples - there I found no indication for manual onclick handling; and the stepper is placed inside a form, and the app is properly initialized and works well, otherwise;-)

I think I worked it out: experimenting with a multipage app, I had my <div class="page"> wrapped inside a <div class="pages"> element - and this seems to have interfered with the stepper initialization.
As soon as I removed the <div class="pages"> (leaving only a single page inside a <div class="page">), the stepper buttons worked.

Get details of card on the click of a button

I have a list of cards of my website and all the cards contain a submit button. I want that when the submit button is clicked, I can get the details of the cards such as the status of the switch and the name of the equipment on that particular card. How do I achieve this?
Below is how my cards look like. Let us assume that I put a button on each of the cards, then I want this to happen on the click of that button.
This is the structure of my card, but I have no idea as to how to achieve the above said thing, due to which I haven't been able to begin with anything
<div class="row">
<div class="col s12 m6">
<div class="card">
<div class="card-content white-text">
<span class="card-title">Air Conditioner</span>
</div>
<div class="card-action" id="action">
<div id="status">ON</div>
<div class="switch">
<label> on <input type="checkbox"> <span class="lever"></span> off </label>
</div>
</div>
</div>
</div>
</div>
I would be obliged to receive a swift response from the community! :D

EDITED:
You haven't provided much info or shown any code that you're using, so I'm going to provide a general answer and assume you're using jQuery.
So, say you have a card like this:
HTML:
<div class="card">
<input id="checkbox-1" type="checkbox">
<button id="button-1">Get value</button>
</div>
You could use jQuery to get the value:
// Wait for jQuery to load,
$(document).ready(function() {
// when #button-1 is clicked,
$("#button-1").click(function () {
// save the value of #checkbox-1 as a variable,
var myValue = $("#checkbox-1").is(':checked');
// and test it to confirm it worked.
console.log(myValue);
});
});

Add an expandable text box to every post

So I am building a comment system and have loaded a bunch of comments to a page, then have generated a reply box for each. Below is what my reply box looks like, but there are many identical ones on each page. As you can see, the first portion is a div that contains a toggle (show/hide) for the reply box.
I am posting because I cannot get the reply toggle to fire.
Here is my html:
<div class="col-sm-offset-1 col-sm-11">
<a href="#" id="reply-toggle">
<span class="text">Reply</span>
<i class="toggle-icon fa fa-angle-down"></i>
</a>
</div>
<div id="reply-div" class="col-sm-12">
<form class="form-horizontal" role="form" accept-charset='UTF-8' data-parsley-validate novalidate>
<fieldset>
<div class="form-group">
<label for="ticket-message" class="col-sm-1 control-label"></label>
<div class="col-sm-11">
<textarea class="form-control" name="post-body" id="new_post_textarea" rows="5" cols="30" placeholder="Try to be as specific as possible when posting!"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-11">
<button id="submit_reply_button" type="submit" class="btn btn-primary btn-block">Submit Reply</span></button>
</div>
</div>
</fieldset>
</form>
</div>
Here is my jquery:
$("#reply-toggle a").click(function() {
alert("running");
$('#reply-div').slideToggle("slow");
)};
I recognize I am not very good in jquery, so I am sure it's something simple, however, I also recognize that I will have to use jquery(closest) to only toggle the reply box associated with the proper comment thread. I have not gotten to this step yet, but it would be greatly appreciated If I could receive some guidance in regards to that as well.
Sincere thanks for any help!

$(document).on('click', '#reply-toggle', function() {
$(this).closest('.col-sm-offset-1').next('#reply-div').slideToggle('slow');
});
edit:added a period to the col-sm-offset-1 class

Your link selector does not match anything. $("#reply-toggle a") will return all <a> tags that have a parent with ID reply-toggle.
You should change this to simply $("#reply-toggle").
Edit: As an aside, you say you have multiple of these Reply buttons - I would strongly recommend you change the ID selector to a class selector as browsers expect only one element with a specific ID per page.

"#reply-toggle a" looks for <a> elements within an element that has id "reply-toggle". Maybe $("a#reply-toggle") would fix your firing issue?
You might want to generate a specific id for each reply toggle and div, say reply-toggle-1and reply-div-1. However, this approach needs a click()defined for each toggle. Use class declarations instead (i.e. not id="reply-toggle", but class="reply-toggle").