I'm using shcontextmenu and i need to hide element/template according to the condition.
I hv tried as shown in the code below using let-data
<sh-context-menu #menu>
<ng-template shContextMenuItem let-data (click)="onRightClick($event, 'add')" >
<div *ngIf="data.type === 'ice'">
Add ice
</div>
</ng-template>
<ng-template shContextMenuItem let-data (click)="onRightClick($event, 'delete')">
<div *ngIf="data.type === 'ice'">
Delete ice
</div>
</ng-template>
<ng-template shContextMenuItem let-data (click)="onRightClick($event, 'removeProduct')">
<div *ngIf="data.type !== 'ice'">
Remove ice
</div>
</ng-template>
</sh-context-menu>
And When condition satisfies it is hiding the text only, and if i hover on it, i can see the empty element with blue background.
Please help how to hide entire div/template
Thanks in Advance.
you are actually hiding the div here not the template, do some changes like below
<sh-context-menu #menu>
<div *ngIf="data.type === 'ice'">
<ng-template shContextMenuItem let-data (click)="onRightClick($event, 'add')" >
Add ice
</ng-template>
</div>
<div *ngIf="data.type === 'ice'">
<ng-template shContextMenuItem let-data (click)="onRightClick($event, 'delete')">
Delete ice
</ng-template>
</div>
<div *ngIf="data.type !== 'ice'">
<ng-template shContextMenuItem let-data (click)="onRightClick($event, 'removeProduct')">
Remove ice
</ng-template>
</div>
</sh-context-menu>
i hope this solve your issue. :)
Related
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.
Trying to align some menu buttons to left with Angular Material
like on the screenshoot
<div>
<mat-toolbar color="primary">
<div fxShow="true" fxHide.gt-sm="true">
<button mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button>
</div>
<a mat-button class="menu" routerLink="/">
<span>Just a menu</span>
</a>
<span class="example-spacer"></span>
<div fxShow="true" fxHide.lt-md="true">
<a mat-button routerLink="/component1">Button1</a>
<a mat-button routerLink="/component2">Button2</a>
<a mat-button routerLink="/component3">Button3</a>
<a mat-button routerLink="/login">Login</a>
<a mat-button routerLink="/logout">Logout</a>
</div>
</mat-toolbar>
</div>
How can I do this in proper way and still have responsive site?
You can use flexbox like this:
Add a class to your div and add container to specify "right and left block"
.container {
display: flex;
justify-content: space-between;
}
<div fxShow="true" fxHide.lt-md="true" class="container">
<div>
<a mat-button routerLink="/component1">Button1</a>
<a mat-button routerLink="/component2">Button2</a>
<a mat-button routerLink="/component3">Button3</a>
</div>
<div>
<a mat-button routerLink="/login">Login</a>
<a mat-button routerLink="/logout">Logout</a>
</div>
</div>
The 3 buttons will be on the left and Login, Logon on the right
I'm using this library: https://www.npmjs.com/package/#angular/flex-layout for easier alignment
After installing the library, use this snippet in your code
<div fxShow="true" fxHide.lt-md="true" fxLayout="row" fxLayoutAlign="space-between center">
<div fxLayout="row" fxLayoutAlign="start center">
<a mat-button routerLink="/component1">Button1</a>
<a mat-button routerLink="/component2">Button2</a>
<a mat-button routerLink="/component3">Button3</a>
</div>
<div>
<a mat-button routerLink="/login">Login</a>
<a mat-button routerLink="/logout">Logout</a>
</div>
</div>
I have looked extensively on ways to fix this issue and I have tried many suggestions, but have yet to solve the problem. I have an Ionic 1 (1.7.16) app, which has a login page that has input fields. When the user taps on the input field the content on the page gets pushed out of view. Then when the keyboard is closed, the content aligns it self correctly.
I have installed the ionic keyboard and implemented cordova.plugins.keyboard.disablescroll(true) and this does not work.
Here is an example of my function that runs when ionic is ready
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
cordova.plugins.keyboard.disablescroll(true)
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
Here is the login page:
<ion-view view-title="Login" align-title="left">
<ion-content class="loginBackground">
<div class="hero no-header flat">
<div class="content">
<div class="app-icon"></div>
<h1>TEST</h1>
</div>
</div>
<div class="padding">
<button class="button button-block icon-left ion-social-facebook button-positive" ng-click="facebookSignIn()">Login with Facebook</button>
</div>
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Username" ng-model="data.name">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" ng-model="data.password">
</label>
</div>
<div class="padding">
<button class="button button-block button-positive" ng-click="login()">Login</button>
</div>
<!--Register Now button-->
<div class="register">
<button class="button button-block button-clear hide-on-keyboard-open" ng-click="register()">Not signed up? Register now!</button>
</div>
<!--END Register Now button-->
</ion-content>
Any ideas?
How can I set Side nav below the toolbar in angular material design? so that sidenav does not come over toolbar..
It's a matter of layout. Just use this page structure:
<div id="main" class="layout-row">
<div id="content" class="layout-column flex">
<md-toolbar>
YOUR TITLE HERE
</md-toolbar>
<md-content>
YOUR CONTENTS HERE
<md-content>
</div>
<md-sidenav class="md-sidenav-left" md-component-id="myPanel">
THE SIDENAV CONTENT
<md-sidenav>
</div>
And that's it!
Here you go. This is what you want, in case it will help someone by the way
<body ng-app="" layout="column">
<md-toolbar>
</md-toolbar>
<md-content flex>
<md-sidenav>
</md-sidenav>
<ui-view></ui-view>
</md-content>
</body
<mat-drawer-container class="example-container">
<mat-toolbar class="example-header" class="fixed-header" color="primary">
<mat-toolbar-row>
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()">
<mat-icon aria-label="Side nav toggle icon" *ngIf="drawer.opened"><span><i class="fa fa-close"></i></span>
</mat-icon>
<mat-icon aria-label="Side nav toggle icon" *ngIf="!drawer.opened"><span><i class="fa fa-th-large"></i></span>
</mat-icon>
</button>
</mat-toolbar-row>
</mat-toolbar>
<mat-drawer #drawer class="example-sidenav" mode="side" opened>
<mat-nav-list>
<a mat-list-item href="#"><i class="fa fa-dashboard"></i><span class="nav-label">Dashboard</span></a>
<a mat-list-item href="#"><i class="fa fa-desktop"></i><span class="nav-label">Branches</span></a>
</mat-nav-list>
</mat-drawer>
<div class="example-sidenav-content">
<router-outlet></router-outlet>
</div>
<mat-toolbar class="example-footer">Footer</mat-toolbar>
</mat-drawer-container>
I have a list with delete button for each element , when the user click on the delete button a confirmation dialog appear ,if the user press the OK button i want to delete the list element my problem is how to get the <li> list element index in order to remove it from the list , my code not return the correct index , please help me ..
<div data-role="page">
<div data-role="content">
<ul data-role="listview" id="employeesList" data-inset="true" data-split- icon="delete">
<li><a href="#">
<font class="line1" > Emp1Name</font>
<font class="line2" >Emp1Salary</font>
</a><a href="#DeleteConfirm" data-rel="popup" data-position-to="window" data- transition="pop" >Delete</a></li>
<li><a href="#">
<font class="line1" > Emp2Name</font>
<font class="line2" >Emp2Salary</font>
</a>Delete</li>
</ul>
<div data-role="popup" id="DeleteConfirm" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="width:400px;height:200px;" class="ui-corner-all">
<div data-theme="c" style="text-align:center;float:center;height:53px;padding-top:13px;" >
<font size="6px" >Delete</font>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<font size="5px" >Do you want to delete this Employee?</font>
<BR>
<div style="text-align:center;font-size: 22px;" >
<input type="button" id="No" data-inline="true" data-icon="delete" data-theme="c" value="No " />
<input type="button" id="Yes"data-inline="true" data-icon="check" data- theme="c" value=" Yes" data-corners="false"/>
</div>
</div>
</div>
</div>
Java script code:
var SelectedLi ;
$('#DeleteConfirm').on('click',function(){
SelectedLi= $(this).parent().index();
});
$('#Yes').on('click',function(){
$('#employeesList').remove(SelectedLi);
$('#DeleteConfirm').popup('close');
});
$('#No').on('click' ,function(){
$('#DeleteConfirm').popup('close');
});
You have mistake in binding event to split button, it should be as follows:
var SelectedLi ='' ;
$('[href=#DeleteConfirm]').on('click',function (e) {
// store parent of clicked button
SelectedLi = $(this).closest("li");
});
$('#Yes').on('click',function(){
$(SelectedLi).remove();
$('#employeesList').listview("refresh");
$('#DeleteConfirm').popup('close');
});
$('#No').on('click' ,function(){
$('#DeleteConfirm').popup('close');
});
Demo
This is how I do my popup:
HTML:
<div data-role="popup" id="sterge" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all">
<div data-role="header" data-theme="b" class="ui-corner-top">
<h1>Delete?</h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<h3 class="ui-title">To Delete Product from Bonus?</h3>
<p>This action cannot be undone.</p>
<input id="giveupButton" data-inline="true" type="button" value="Cancel"/>
<input id="delButton" data-inline="true" onclick="deletebonusproduct();" data-theme="b" type="button" value="Delete"/>
</div>
</div>
JS:
$(document.body).on('click', '.del' ,function(){
li = $(this).parent();
$('#sterge').popup("open");
});
$(document.body).on('click', '#delButton' ,function(){
$('#sterge').popup("close");
li.remove();
});
$(document.body).on('click', '#giveupButton' ,function(){
$('#sterge').popup("close");
});