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
Related
I'm trying to dynamically render a set of questions and an image (positioned next to each other) each time a button is clicked.
I'm using bootstrap and here is my code.
<div v-if="!submittedAnswer" class="row text-center" id="questions-container">
<div class="image-holder col-sm-5">
<img :src="questions[questionIndex].imgUrl" class="img-responsive" />
</div>
<div v-for="(item,index) in questions[questionIndex].choices" class="col-sm-7 text-center choice">
<p class="shadow-effect
" :class="{'active': activeChoiceId == index}" :id="index" #click="chooseAnswer">{{item}}</p>
</div>
</div>
As can be seen both the image and the question set are rendered in their own respective columns. The issue im facing is that they load in a weird order which in turn creates a glitchy looking affect. I've managed to screenshot what happens.
Even though they are split in two separate columns. The second column seems to partially render in the area of the first column. Then when the image renders, it pushes them over, creating a buggy looking effect.
I've tried creating larger space between them with margins, padding. Or using flexbox instead but the issue still persists.
When your view renders, it renders like this:
<div class="image-holder col-sm-5">{{ image }}</div>
<div class="col-sm-7 text-center choice"">{{ answer }}</div>
<div class="col-sm-7 text-center choice"">{{ answer }}</div>
<div class="col-sm-7 text-center choice"">{{ answer }}</div>
.
.
.
Since the bootstrap grid has 12 spaces, the "col-sm-7" div blocks after the first one are rendered in a new line, because they have no more space to render.
What you need to do is to wrap all the answers inside a <div class="col-sm-7"> block, so they would render correctly. Something like this:
<div v-if="!submittedAnswer" class="row text-center" id="questions-container">
<div class="image-holder col-sm-5">
<img :src="questions[questionIndex].imgUrl" class="img-responsive" />
</div>
<div class="col-sm-7">
<div v-for="(item,index) in questions[questionIndex].choices" class="text-center choice">
<p class="shadow-effect
" :class="{'active': activeChoiceId == index}" :id="index" #click="chooseAnswer">{{item}}</p>
</div>
</div>
</div>
I'm trying to add a Bootstrap toggle button that when is pressed collapses a chart. I've first added the same button for a datatable and it worked but when I added it to my chart on the first click the panel where the chart is in it shrink, on the second click it hides the chart and on the third (when it should open it) it opens but it's shrink (out of the panel).
<div class="mypanel" id="PanelA">
<div class="panel panel-default">
<div class="panel-body">
<div class="demo-container">
<div id="ChartA" class="demo-placeholder"></div>
</div>
<div class="demo-container" data-bind="visible:dataList().length>0">
<br />
<div class="btn-group" style="padding-right:10px; padding-left:10px">
<button type="button" class="btn btn-default pull-left" data-toggle="collapse" id="BtnCA">
<span class="fa fa-bar-chart" aria-hidden="true"></span>
<span class="btnFont">Show Chart</span>
</button>
</div>
<div id="ChartA-Overview" style="width: 100%; min-height:100px" class="demo-placeholder"></div>
</div>
</div>
</div>
</div>
Is there any way to collapse/show a Flot chart whenever the toggle button is pressed?
First thing is you're missing an ending double-quote in your ID. You'll want to also add class="collapse" to the div if you want the div to start off collapsed.
<div id="ChartA-Overview ...
It should be <div id="ChartA-Overview" class="collapse" ... >
Since you're using a <button>, add the data-target attribute to target the div's ID that you want to collapse and expand (i.e. data-target="ChartA-Overview").
Edit 2
Sometimes the Id's come from data-bind... its' something like ""ChartA-Overview"+Id(),
If this is the case, you can use jQuery to get the div ID to add the data-target attribute. Here's a codepen for you to review.
http://codepen.io/yongchuc/pen/QGLdez
Using Bootstrap, an application has a page with one form and multiple panels, each with a submit button. The first panel's button is the form default button whenever the Enter key is pressed. When a user fills in text inputs in the second panel and hits Enter, the second panel's button value should be sent to the Controller, but the first panel button's value, the form default button, is always sent instead.
I've tried adding a script to trigger focus or activation on the appropriate panel button when that panel is clicked or activated, to no avail. Does anyone know how to target a panel button for submission when it's panel is the one being used by the User? Thanks in advance!
Snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default" id="basicsPanel">
<div class="panel-heading">Basic Info</div>
<div class="panel-body">
<div class="row">
<!-- Text boxes and such -->
</div>
<div class="row">
<!-- This is always the default button upon pressing Enter key -->
<button type="submit" id="saveBasics" name="buttonCommand" class="btn btn-success pull-right" value="Save Basics">Save Basics</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-info" id="ownerPanel">
<div class="panel-heading">Owner</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-4">
<!-- Other text boxes and such -->
</div>
</div>
<div class="row">
<div class="col-lg-12 text-right">
<!-- This button should be the one used when a User presses the Enter key while filling in data in this panel -->
<button type="submit" id="saveOwner" name="buttonCommand" class="btn btn-success" value="Save Owner">Save Owner</button>
</div>
</div>
</div>
</div>
</div>
</div>
Example of attempted script, which does indeed focus on the correct button when a panel is activated, but prevents the user from actually entering information into the panel's text boxes:
$("#ownerPanel").click(function () {
$("#saveOwner").focus();
});
$("#basicsPanel").click(function () {
$("#saveBasics").focus();
});
As of HTML5, the default button is the first button defined. You have a couple options to handle multiple buttons with enter presses:
Define multiple forms, each with one submit button. That way each panel is tied directly to the button you want it to use. This is nice and clean if the forms are independent, but if you still want the data from all forms, you'd need to catch the submission in JavaScript and pull the other forms' data into the payload.
Capture the keypress event in JavaScript and use the currently focused field to determine which button should be pressed. This lets you keep a single form with all the data in one place. A simple strategy for picking the button to use might be to traverse from the focused field to .closest('panel') and then back down to children('input[type=submit]').
I'm using angularJs and twitter Bootstrap form my app.
<div class="row">
<div class="col-xs-12">
<div class="row yo-bold">
<div class="col-xs-6 col-sm-5">
{{ "KEY" | translate | capitalize}}
</div>
<div class="col-xs-6 col-sm-5">
{{ "LABELS" | translate | capitalize}}
</div>
<div class="hidden-xs col-sm-2">
{{ "ACTIONS" | translate | capitalize}}
</div>
</div>
<hr />
<div class="row yo-mb5 yo-div-table" ng-repeat="l in langs | filter:searchText | orderBy: '_id' track by $index" ng-class="$index % 2 == 0 ? 'yo-bg-grey' : ''">
<div class="col-xs-6 col-sm-5">
{{ l._id }}
</div>
<div class="col-xs-6 col-sm-5">
<div class="row" ng-repeat="lang in langsAvailable track by $index">
<div class="col-xs-12">
<flag country="{{lang | getLangCode}}" size="16"></flag> {{ l[lang] }}
</div>
</div>
</div>
<div class="hidden-xs col-sm-2">
<button class="btn btn-xs btn-warning" ng-click="openLangModal(l)"><i class="fa fa-pencil"></i></button> <button class="btn btn-xs btn-danger" ng-click="removeLabel(l._id)"><i class="fa fa-trash"></i></button>
</div>
</div>
</div>
</div>
In > 768px version (col-sm-*) it looks like this:
In < 768px version (col-xs-*) it looks like this:
In version <768px I removed the column of actions and I would insert a ng-click on the entire row, open a modal and choose the desired action within the modal.
Is possible?
I know I can do this by creating two div class="row" different for different screen sizes with a hidden-xs in the first and a visible-xs in the second but I was wondering if there was a better way. some idea?
The more cleaner and ideal way of doing it would be to add a custom attribute(ng-click) via jquery when you are in <768px device width. Which can be done using $(window).width().
We would be just adding or removing that attribute based on the screen width.
if ( $(window).width() < 768) {
//code goes here
}
How to do it:
Since you have used Bootstrap I obviously assume the Actions column below <768px screen width would vanish.
1) Apply a class to the main parent row, say <div class="row yo-row">.
2) We will use this class to identify the rows and insert ng-click attribute to the rows.
if ( $(window).width() < 768) {
$('.yo-row').attr("ng-click", "openModal()");
}
3) Now all that is left is to add the modal div for the modal to open. Simple :-)
Note: Obviously since its JavaScript doing the magic and not CSS, you need to make the scripts run again for you to see the change. Therefore, you need to go to any specific window size and reload for it to show the attribute. This will not work if you try to re-size the browser window from desktop to small screen and expect it to apply the attribute.
The easiest way is to created two distinct <div> and conditionnaly show the required one using the ng-if directive.
You can resolve the screen width in Angular why :
$window.innerWidth
You can attach a click event handler to the row which checks for the visibility of the icons. If the icons are visible, do nothing. If they are hidden, display your modal with the controls.
I have a couple of dynamically created buttons with toggle boxes below it that are created like so.
HTML
<button type="button" class="accordion-toggle btn btn-default btn-small"
data-toggle="collapse" data-parent="#accordion'+this.id+'"
href="#collapseOne'+this.id+'"><i class="icon-info"></i></button>
Here is the textbox collapse it calls to display on click
<div id="accordion'+this.id+'">
<div id="collapseOne'+this.id+'" class="collapse" style="height: auto;">
<div class="control-group control-group-notes">
<button onclick="clearMsgBox(\''+this.id+'\')" type="button" class="close" data-toggle="collapse" data-parent="#accordion'+this.id+'" href="#collapseOne'+this.id+'">x</button>
<textarea id="doGet'+this.id+'" style="width: 92%;" rows="2" placeholder="Message..."></textarea>
</div>
</div>
</div>
The button and boxes are dynamically created and works fine. The only issue I can't seem to figure out is that on load all the boxes are open and not hidden. But once I click the x button it toggles to hide just fine.
Could anyone help me out? Thank you in advance.
In bootstrap the class="in" determines the visibility of your accordion and it's probably present on all of them when it loads.
class="panel-collapse collapse in"
For those you do not want to show onload remove the "in" class.
Solved!
If anyone wants to the know what was causing it.
As stated above in class needed to be removed. also there was a height auto that needed be removed.
code as follows.
<div id="accordion'+this.id+'">
<div id="collapseOne'+this.id+'" class="collapse">
<div class="control-group control-group-notes">
<button onclick="clearMsgBox(\''+this.id+'\')" type="button" class="close" data-toggle="collapse" data-parent="#accordion'+this.id+'" href="#collapseOne'+this.id+'">x</button>
<textarea id="doGet'+this.id+'" style="width: 92%;" rows="2" placeholder="Message..."></textarea>
</div>
</div>
</div>
If you want your div to be hidden on load, you can try to set: "display:hidden;" in your CSS for this div. Then the toggle function will show it on click by changing the display attribute. (at least this is how it works with jquery)