I'm trying to add a button on the accordion heading. but when I click on the button, the accordion group collapse or open. but i dont want to trigger the accordion click when I click on the button.
If i put the button tag inside accordion-heading, it will put that into accordion-toggle class. so it wont trigger the button click. not sure if there is an easy way to change it.
http://plnkr.co/edit/eXE7JjQTMxn4dOpD7uKc?p=preview
Anyone can help?
Thanks
Add $event.stopPropagation(); in the ng-click.
http://plnkr.co/edit/eXE7JjQTMxn4dOpD7uKc?p=preview
The check marked solution didn't work for me, until I added $event.preventDefault() before $event.stopPropagation(). Maybe I got different results because I'm dealing with a check box or a newer version of Angular?
<uib-accordion-heading>
{{ thisGroup.stringThatShouldOpenAndCloseTheHeader }}
<!-- my checkbox changes -->
<div class="material-switch pull-right">
<input type="checkbox" id="{{ thisGroup._id }}" name="{{ thisGroup._id }}" ng-checked="thisGroup.active" />
<label for="{{ thisGroup.template._id }}" ng-click="$event.preventDefault(); $event.stopPropagation(); $ctrl.checkOrUnCheck(arg)"></label>
</div>
</uib-accordion-heading>
I needed BOTH, though. If I removed either, any clicking on the checkbox would open or close the accordion
or you can create a directive in your button tag for further usage :
.directive('yourDirective',function(){
return{
restrict:'A',
link : function(scope,ele,attr){
ele.bind("click",function(event){
alert('I will not toggle accordion');
event.preventDefault();
event.stopPropagation();
})
}
}
})
HTML
<button your-directive> Click Me <button>
Related
So I am making a todo app and I want to add stroke to the done tasks but the problem is that it is not working properly.
my .css file
.stroke{
text-decoration: line-through
}
and the element in the .html file
<div *ngFor="..." [class.stroke]="task.isDone">Task Text </div>
What is happening is that whatever value isDone have at first will determine whether or not the item gets the stroke. Because when I toggle it later on, it doesn't change but it should!
This is how it looks when it is first loaded.
But when I uncheck it. The line through doesn't go away
and yes I am binding task.isDone with the checkbox
[(checked)]="task.isDone"
[class.stroke]="task.isDone"
I tried it on the latest version of chrome & latest version of Safari
Has anyone faced a similar issue with the text-decoration property?
Use [(ngModel)] binding.
<div *ngFor="let task of tasks" [class.stroke]="task.isDone">
<input type="checkbox" [(ngModel)]="task.isDone" />
{{ task.name }}
</div>
OR
With (change) event and [checked] binding.
<div *ngFor="let task of tasks" [class.stroke]="task.isDone">
<input type="checkbox" [checked]="task.isDone" (change)="task.isDone = !task.isDone" />
{{ task.name }}
</div>
Sample Solution on StackBlitz
I have 2 strange problems. I have a large form with lots of input fields. That works fine. I want to add a slide toggle at the bottom which changes a variable that will affect styles on the whole form.
My first problem is that the variable will not display until the slide toggle is clicked.
HTML
<mat-slide-toggle [(ngModel)]="ifPrint" name="ifPrint" id="ifPrint" ></mat-slide-toggle>
<div>
{{ifPrint}}
</div>
COMPONENT
export class PrintReviewDetailsComponent implements OnInit {
ifPrint = true;
}
the ifPrint variable is blank on page load
The second problem is
when the slide toggle is clicked the div containing the variable shows as true but when I click the toggle to the off position the ifPrint variable stays as true and does not change.
I have created a blitz and it is working fine there with the same code so I am unsure as why I am having these issues on my page.
The console says:
Error: No value accessor for form control with name: 'ifPrint'
EDIT: I updated the stackblitz to include the html of the form and now it is not working.
Your updated stackblitz couldn't recreate the issue which you shared... But from your question, the following 2 issues are addressed for a form and styling is also done:
the toggle value was not displayed by-default until the toggle was clicked
the toggle value didn't change when you toggled it
the style is now being updated based on the toggle value
relevant TS:
model:any;
constructor(){
this.model = {name: '' , age: null, ifPrint: false};
}
relevant HTML:
<form (ngSubmit)="formSubmit()" #demoForm="ngForm" >
<div [ngClass]="model.ifPrint === true ? 'trueClass' : 'falseClass'">
<input type="text" placeholder="Enter Name" #name="ngModel" [(ngModel)]="model.name" name="name" />
<br/>
<input type="number" placeholder="Enter Age" #age="ngModel" [(ngModel)]="model.age" name="age" /> <br/>
<mat-slide-toggle #ifPrint #age="ngModel" [(ngModel)]="model.ifPrint" name="ifPrint"></mat-slide-toggle> {{model.ifPrint}} <br/>
</div>
<button type="submit"> Submit </button>
</form>
check a minimal, working demo here for what you're trying... hope it helps...
I removed everything in your template except the mat-slide-toggle and it works as expected.
I believe the issue is because your html template is referencing methods or properties that your component does not have, or trying to access a property of null or undefined somewhere is causing the issue.
Check your console for the errors and if you fix those up, the slide toggle should work as expected.
I have a button at the end of a form in Angular.
<form>
<!-- form inputs and stuff -->
<!-- hovering on button does not work with disabled -->
<button (mouseover)="findInvalidFieldsAndPutInArray()" [disabled]="myForm.form.invalid" data-toggle="tooltip" data-placement="top" title="Tooltip that shows Invalid fields: {{ invalidFieldsArray.join(', ')}}">Submit</button>
</form>
My current work around is to just bind a CSS class instead of the disabled property in the button so that hovering over via (mouseover) allows the tooltip and function to fire.
.cant-click {
pointer-events: none;
touch-action: none;
}
So my question is, is there more to the disabled property that I should know about before removing it in the buttons of my form. Will browsers/screen-readers/crawlers be affected in any negative/misleading way? Or can I just remove it and use the fix listed above?
I am building a login feature into a bootstrap navbar, and using the boostrap dropdown component. By default, this component closes on a click. To handle login errors, however, the component needs to stay open to display an error message. Through JQuery, it's possible to either prevent the close and then show the desired error message. But this doesn't feel right in React.
But what is the right way to do this in React? It seems that, if there's a login error, I want to
1) Set a set a state variable with the correct error message
2) Call setState to force a re-render
3) On re-render, show the drop-down as open and with the error message
But how can I show the drop-down as open on the re-render? Is there a property that will force it to start opened? Below is the HTML
<li>
<a id="nav-login" className="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Login</a>
<div className="useraccount-dropdown-menu dropdown-menu" onClick={this.preventClose} >
<p className="title">LOG IN</p>
<form action="#" onSubmit={this.login} method="post" acceptCharset="UTF-8">
<label>USER NAME</label>
<input className="textfield" ref="username" placeholder="userone#email.com" type="text"/>
<label>PASSWORD</label>
<input className="textfield" ref="password" placeholder="**********" type="password"/>
<button className="btn btn-primary btn-nativelogin" type="submit">Sign in</button>
</form>
</div>
</li>
Right now, onSubmit, the following function gets sets the error message - and calls setState. This is changing the state variable, but bootstrap closes the component so the re-render never happens.
login : function(e){
e.preventDefault();
Meteor.loginWithPassword(this.refs.username.value, this.refs.password.value, (error) => {
if(error){
this.setState({errorMsg: error.reason});
}else{
this.setState({isLoggedIn: true});
}
});
},
How can I prevent the component from closing? I tried adding an onClick event listener to the overall drop-down component and that calls stopPropagation.
preventClose: function(e){
e.preventDefault();
e.stopPropagation();
},
But this is not preventing the close.
You can handle the click event. Check out this demo
$('#myDropdown .dropdown-menu').on({
"click":function(e){
e.stopPropagation();
}
});
I hope this helps.
I would like know how i could add a button that inserts things on html or php.
So here an example
Before I click the button
Before
After I click the button
After
How do I do this?
If you have to do exactly like shown in image then try,
$('#btn').on('click', function(){
var text = "> blockquote";
$('#test2').append(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="test2">Hello world</textarea>
<button id="btn">
click me
</button>