I have mat-toolbar and a button at the end of it.
When i try to get the position of the button it gives me wrong value of left/right.
In the following example both buttons return same positioning although one is at the beginning of the screen and the other is at the end.
Html:
<mat-toolbar color="primary">
<mat-toolbar-row>
<span> toolbar</span>
<span class="example-spacer"></span>
<button #rowBtn mat-button (click)="clickButtonOut()">
click me
</button>
</mat-toolbar-row>
</mat-toolbar>
<button #outOfRowBtn mat-stroked-button (click)="clickButtonOut()">button outside of toolbar</button>
Ts:
#ViewChild('rowBtn',{static: false}) row: any;
#ViewChild('outOfRowBtn',{static: false}) out: any;
clickButtonRow(){
alert(this.row._elementRef.nativeElement.getBoundingClientRect().left)
}
clickButtonOut(){
alert(this.out._elementRef.nativeElement.getBoundingClientRect().left)
}
https://stackblitz.com/edit/angular-bk38qb
You always call the same function. You can never get the right value. You have to change the one function call from clickButtonOut() to clickButtonRow()!
Your Code:
<mat-toolbar color="primary">
<mat-toolbar-row>
<span> toolbar</span>
<span class="example-spacer"></span>
<button #rowBtn mat-button (click)="clickButtonOut()"> <-- wrong function
click me
</button>
</mat-toolbar-row>
</mat-toolbar>
<button #outOfRowBtn mat-stroked-button (click)="clickButtonOut()"> <-- right function
button outside of toolbar
</button>
Related
I use react hook form, i have a form which my submit button placed in the parent component. my question is how i deal with the loading state of the button, when i try to call an api?. I have tried to use isSubmitting state, but again i dont know how to make that state visible for another component. i am glad to receive an answer. my real problem is how i can make state 'isSubmitting' able to read by my parent component, so i can do loading button after i call the api.
this for the parents
const ForceEditPassword = () => {
const childRef = useRef<any>();
return (
<>
<div className='force-edit-password d-flex flex-column justify-content-center align-items-center'>
<div className='inner d-flex justify-items-center align-items-center flex-column'>
<FormEditPassword ref={childRef} />
<button className='bg-primary rounded bottom-0 start-50 translate-middle-x'
onClick={() => { childRef.current?.onSubmit(); }}>
<p className='text-light m-0 p-2 text-capitalize rounded'>
Simpan
</p>
</button>
</div>
</div>
</>
);
};
export default ForceEditPassword;
I am trying to move the .mat-tab-header-pagination-after to next to the .mat-tab-header-pagination-before in a .mat-tab-group, the angular tab component. I am wondering how I am able to move the after pagination either in the html or css. Since it is automatic when the pagination shows, I am not sure how I am able to instantiate it differently so that it moves to the placement I want it to be. Any help from html or css familiar with angular components?
<mat-tab-group [selectedIndex]="selected.value"
(selectedIndexChange)="selected.setValue($event)">
<mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab" (contextmenu)="onContextMenu($event, tab)">
<ng-template mat-tab-label>
<div class="col" style="margin-left: 20px;">{{tab}}</div>
<button *ngIf="tab.name !== 'Main'" style="color:black; bottom:10px; right:10px" mat-icon-button (click)="closeTab(index)">
<mat-icon>close</mat-icon>
</button>
<button mat-icon-button [matMenuTriggerFor]="contextMenu">
<mat-icon>more_vert</mat-icon>
</button>
</ng-template>
Contents for {{tab}} tab
</mat-tab>
<mat-tab disabled>
<ng-template mat-tab-label>
<button mat-icon-button (click)="addTab(selectAfterAdding.checked)">
<mat-icon>add_circle</mat-icon>
</button>
</ng-template>
</mat-tab>
</mat-tab-group>
Before Picture:
Image of how it is now
After Picture with wanted placement:
Image with moved placement
Since .mat-tab-header is a flex container, you can user the order property on child elements to change it's order:
.mat-tab-header-pagination-controls-enabled {
.mat-tab-header-pagination-before {
order: 0;
}
.mat-tab-header-pagination-after {
order:1;
}
.mat-tab-label-container {
order: 2;
}
}
Note that due to style encapsulation you need to apply those in global styles.
Stackblitz with updated styles (forked from official examples) here.
I'm looking to create a dropdown button with a popover. The menu works fine by itself but once the popover is added the menu sticks in the open position once clicked. How would I get dropdown and popover working together?
<div class="btn-group">
<button class="btn btn-primary" data-bs-toggle="tooltip" rel="nofollow" title="Make a GET request">GET</button>
<button class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" data-bs-toggle-second="tooltip" title="Specify a format for the GET request">
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" data-bs-toggle="tooltip" title="A title">An item</a>
</li>
</ul>
</div>
<script type="text/javascript">
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"], [data-bs-toggle-second="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
I've also created it on JSFiddle
This is the easiest workaround i could find. Divide the toggle and the tooltip functionalities, and it will work as intended.
<button class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
<span class="sr-only" data-bs-toggle="tooltip" title="Specify a format for the GET updated">Toggle Dropdowns</span>
</button>
This is where i find the idea for the solution stackoverflow similar problem
I am using material design in my Angular7 project.There is a click event on a mat-button.
itemclick(event: Event) {
//to know the id of clicked element,ie button
let elementId: string = (event.target as Element).id;
console.log(elementId);
}
here is the HTML
<button mat-button color="primary" id="test1" (click)="itemclick($event)" style="outline: none">Property1</button>
But I dont get the id always, because the (event.target) keeps changing randomly between mat-button(case in which id=test1) and mat-button-wrapper(case in which id is null).
How to solve this?
Thanks in advance.
Replace your function with:
HTML:
<button mat-button #test color="primary" id="test1" (click)="itemclick(test)" style="outline: none">Property1</button>
TS:
itemclick(event) {
console.log(event._elementRef.nativeElement.id)
}
StackBlitz
I am using one search box.How to clear value of this text box By button click.
$(document).ready(function(){
$(".searchClear").click(function(){
//document.getElementById("searchGo").value="";
$('#searchGo').removeAttr('value');
});
<input class="col-lg-3" type="text" name="searchroleName" id="searchroleName">
<button class="btn searchGo" id="searchGo">Go</button>
<button type="reset" class="btn searchClear">Clear</button>
Try this
$(document).ready(function(){
$(".searchClear").click(function(){
$('#searchroleName').val('');
});
Empty the value rather than removing the element attribute, Also your brackets are not closed properly.
Also the selector of an input is wrong.
Try following code
$(document).ready(function() {
$(".searchClear").click(function() {
//document.getElementById("searchGo").value="";
$('#searchroleName').val("");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input class="col-lg-3" type="text" name="searchroleName" id="searchroleName">
<button class="btn searchGo" id="searchGo">Go</button>
<button type="reset" class="btn searchClear">Clear</button>