We Keep Coding

How to change toggle icon of mat-expansion-panel?

The default icon for toggling a mat-expansion-panel is >. Setting hideToggle true just hides the toggle icon. Is there any way to change it? I found nothing in the official documentation. I want to use + or - icon if the state is closed or opened respectively.

As stated on the Angular Material Expansion Panel documentation, we can customise the stylings of the mat-extension-panel-header, which will in turn allow you to customise the icons.
First and foremost, you hide the original icon by setting the hideToggle attribute to true. In addition, we assign the event bindings (opened) and (closed) to the panelOpenState property. You may check out the other properties of mat-expansion-panel over here.
<mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"hideToggle="true">
Next, on your mat-panel-description, you include the custom icons required. The icons shown will be dependent on the state of the panel. For this example, we are using the icons from Material Icons.
<mat-panel-description>
<mat-icon *ngIf="!panelOpenState">add</mat-icon>
<mat-icon *ngIf="panelOpenState">remove</mat-icon>
</mat-panel-description>
I have edited the original sample from the Angular documentation, such that it is using the custom + and minus icons to denote the expanded/collapsed state of the mat-extension-panel. You may access the demo over here.

There is a class .mat-expanded which is applied to a <mat-expansion-panel>
So you can just use CSS to change the icon, no JS required.
To change arrow down to up:
.mat-expanded .mat-expansion-panel-header-title .material-icons{
transform: rotate(180deg);
}
<mat-panel-title>
<span class="material-icons">expand_more</span>
Panel with icon `transform`
</mat-panel-title>
To swap icons:
.mat-expansion-panel-header-title .open,
.mat-expanded .mat-expansion-panel-header-title .close{
display: inline-block;
}
.mat-expanded .mat-expansion-panel-header-title .open,
.mat-expansion-panel-header-title .close{
display: none;
}
<mat-panel-title>
<span class="material-icons open">open_in_full</span>
<span class="material-icons close">close_fullscreen</span>
Panel with open/close
</mat-panel-title>
Here is a link to a demo https://stackblitz.com/edit/angular-e2fnlm
CSS solution works with multiple Material Expansion Panels

Give the name to the mat-expansion-panel say panel in the example. Use expanded property of the mat-expansion-panel to show or hide the + or - icon.
<mat-expansion-panel #panel hideToggle>
<mat-expansion-panel-header>
<mat-panel-title>
Buttons
</mat-panel-title>
<mat-icon >{{panel.expanded? 'remove' : 'add'}}</mat-icon>
</mat-expansion-panel-header>
</mat-expansion-panel>

For those interested, here is an example that works with multiple Expansion Panels:
View:
<mat-accordion>
<mat-expansion-panel *ngFor="let panel of panels; let i = index"
(opened)="panelOpenState[i] = true" (closed)="panelOpenState[i] = false"
hideToggle>
<mat-expansion-panel-header>
<mat-panel-title>
{{panel.title}}
</mat-panel-title>
<span *ngIf="!panelOpenState[i]">Show</span>
<span *ngIf="panelOpenState[i]">Hide</span>
</mat-expansion-panel-header>
Panel Content
</mat-expansion-panel>
</mat-accordion>
Component:
export class PanelComponent implements OnInit {
panels: [];
panelOpenState: boolean[] = [];
ngOnInit() {
// loop to add panels
for (let i = 0; i < 5; i++) {
this.panels.push({ title: i });
this.panelOpenState.push(false);
}
}
}

You can use mat-icon in the mat-expansion-panel-header.
Please check this working example on stackblitz.
For a + icon you can use <mat-icon>add</mat-icon>
<mat-accordion>
<mat-expansion-panel hideToggle>
<mat-expansion-panel-header>
<mat-panel-title>
Personal data
</mat-panel-title>
<mat-icon>add</mat-icon>
</mat-expansion-panel-header>
<mat-form-field>
<input matInput placeholder="First name">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Age">
</mat-form-field>
</mat-expansion-panel>

add hideToggle to mat-expansion-panel :
<mat-expansion-panel (opened)="panelOpenState = true"
(closed)="panelOpenState = false" hideToggle>
and add icon:
<mat-expansion-panel-header>
<mat-icon>add</mat-icon>

angular material - sidenav from the bottom?

Angular material sidenav seems to have a left/right options:
<md-sidenav class="md-sidenav-**right**">
<md-sidenav class="md-sidenav-**left**">
Although it is called a "side"-nav, is it possible to use it as a "bottom"-nav?
if so how can it be done?

there is no bottom-nav as you said, but you can do it using https://material.angularjs.org/latest/demo/bottomSheet
VIEW
<div class="bottom-sheet-demo inset" layout="row" layout-sm="column" layout-align="center" >
<md-button flex="50" class="md-primary md-raised" ng-click="showBottomSheet()">Show</md-button>
</div>
JS
$scope.showBottomSheet = function() {
$scope.alert = '';
$mdBottomSheet.show({
templateUrl: 'bottom-sheet-template.html',
controller: 'BottomSheetCtrl'
}).then(function(clickedItem) {
$scope.alert = clickedItem['name'] + ' clicked!';
});
};

angular material does not support bottom nav .. you have to achieve it manually.

I think that what you are trying to achieve can be done by overwriting angular material styles to suit your needs. Just add some custom class or id to <md-sidenav> element and apply your styles.

Injecting $mdMenu into scope. Cannot read property open() of undefined

I am trying to get the Angular Material Design menu to work but I don't seem to be able to use the $mdMenu that is supposed to be injected by the ng-click.
My HTML markup:
<div layout="column" layout-fill ng-controller="AuthControl">
<md-toolbar ng-controller="navigationControl">
<div ng-controller="menu as ctrl">
<md-menu>
<md-button class="md-icon-button" ng-click="ctrl.open($mdMenu, $event)">
<md-icon>menu</md-icon>
</md-button>
<md-menu-content width="4">
<md-menu-item>
<md-button>
<md-icon>account_circle</md-icon>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</div>
</md-toolbar>
</div>
The Angular Controller:
controllers.controller('menu', function menuControl($mdDialog) {
var originatorEv;
this.open = function($mdMenu, ev) {
originatorEv = ev;
$mdMenu.open(ev);
};
});
The contoller gets injected properly but when I run I get the Error
TypeError: Cannot read property 'open' of undefined
Does anybody know how to fix this?
Thanks

Instead of mdMenu, pass mdOpenMenu
<md-button aria-label="menu" class="md-fab md-mini md-primary" ng-click="ctrl.openMenu($mdOpenMenu, $event)">
Controller:
this.openMenu = function($mdOpenMenu, ev) {
originatorEv = ev;
$mdOpenMenu(ev);
};
DEMO

"$mdOpenMenu" has been replaced by "$mdMenu.open" and is now deprecated. Use the latest version of Angular Material and it will work just fine.

Angular Material switch between show and hide programmatically

Is it possible to switch between the attributes show and hide by button click (programmatically)? I have for example a card with a map and a list view.
These are usually displayed side by side. On mobile devices, but is for the List view flex = 100 increases. The map is no longer displayed. The user should however have the possibility to switch between the two views. How I can do that?
My example tags:
<md-card flex-gt-xs="40" flex-xs="100">
<list></list>
</md-card>
<md-button>toggle Views</md-button>
<md-card flex="60" hide-xs show-gt-xs >
<leaflet height="40vh" ></leaflet>
</md-card>
Update:
Summary
I would like to have 2 columns that can be switched on mobile devices, and side by side on larger devices.

I'm not 100% sure what you are asking but this CodePen demonstrates the basics of toggling programatically.
md-button has an ng-click attribute that calls the function toggle() which toggles the view value. view is passed to the ng-if of each card.
Markup
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" style="height:100%" layout="column">
<md-card flex-gt-xs="40" flex-xs="100" ng-if="view">
Card 1
<list></list>
</md-card>
<md-button ng-click="toggle()">toggle Views</md-button>
<md-card flex="60" hide-xs show-gt-xs ng-if="!view">
Card2
<leaflet height="40vh" ></leaflet>
</md-card>
</div>
JS
angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache', 'ngDialog'])
.controller('AppCtrl', function($scope) {
$scope.view = true;
$scope.toggle = function () {
$scope.view = !$scope.view;
}
});
You can replace ng-if with ng-show if you need to retain information in elements that you are toggling as ng-if recreates the element each time it is true.

I have found the solution. $mdMedia does all the magic.
js:
$scope.$watch(function () {
return $mdMedia('sm');
}, function (big) {
$scope.screenIsSmall = $mdMedia('sm');
});
View:
<md-card flex="60" ng-hide="screenIsSmall&&!showMap" style="max-height: 40vh">
<md-button ng-show="screenIsSmall" ng-click="showMap = !showMap">toggle</md-button>
<leaflet height="40vh"></leaflet>
</md-card>

app.component.html
<div fxLayout="column" fxLayout.gt-sm="row wrap">
<div fxFlex="50" class="flex-p">
<mat-slide-toggle
[checked]="isSlideChecked"
(change)="toggleChanges($event)"
>Hide/Show - card</mat-slide-toggle
>
</div>
</div>
<mat-card *ngIf="isSlideChecked">Simple card</mat-card>
app.component.ts
isSlideChecked: boolean = false;
toggleChanges($event: MatSlideToggleChange) {
this.isSlideChecked = $event.checked;
}

jQueryUI Button: How to change Button-Icon 'color'

I have placed a html button inside a div in the following manner:
<div class="ui-state-highlight">
<button type="button" class="ui-button ui-state-default ui-corner-all ui-button-text-icon-primary">
<!-- first span -->
<span class="ui-button-icon-primary ui-icon ui-icon-disk"></span>
<!-- second span -->
<span class="ui-button-text">Save</span>
</button>
<!-- third span -->
<span class="ui-icon ui-icon-info"></span>
<strong>All</strong> form fields are required.
</div>
Since the div is assigned with the class:ui-state-highlight the button's icon color has changed to blue.
Is there is a way I can revert the icon color back to: default (black) color?
And further, I need the icon in the third span to have the effect (color) of ui-state-highlight.
I'v tried applying ui-state-default, just to the first span (containing the icon), but that did not give the expected effect.

Re-writing the ui-state-highlight class applied for the containers (such as divs and spans) fix the problem.

You can add new style, where will be path to images with default (black) icon color (http://code.jquery.com/ui/1.9.2/themes/base/images/ui-icons_2e83ff_256x240.png)
Edit:
Or change outer div class to ui-state-default:
<div class="ui-state-default">
<button type="button" class="ui-button ui-state-default ui-corner-all ui-button-text-icon-primary">
<span class="ui-button-icon-primary ui-icon ui-icon-disk"></span>
<span class="ui-button-text">Save</span>
</button>
</div>

Define a style yourself, like this:
.ui-icon-custom { background-image: url(images/custom.png); }
Then just use it when calling .button(), like this:
$('#button').button({
label: 'Test',
icons: {primary: 'ui-icon-custom', secondary: null}
});
This assumes that your custom icon is in the images folder beneath your CSS...the same place as the jQuery UI icon map typically is. When the icon's created it gets a class like this: class="ui-icon ui-icon-custom", and that ui-icon class looks like this (maybe a different image, depending on theme):
.ui-icon {
width: 16px;
height: 16px;
background-image: url(images/ui-icons_222222_256x240.png);
}
So in your style you're just overriding that background-image, if needed change the width, height, etc.