Want to edit the properties of mat-calendar of a component.
tried using ::ng-deep but changes reflecting in all other components to.
before:
expected output:
code:
::ng-deep .mat-calendar-period-button{
visibility: hidden;
}
Tried editing mat-calendar nav bar using ::ng-deep
but effecting all other occurrences of mat-calendar in the project
Using a panelClass will allow you to specify in which data pickers should mat-calendar-period-button be hidden
<mat-form-field>
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker" />
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker panelClass="my-datepicker"></mat-datepicker>
</mat-form-field>
::ng-deep .my-datepicker .mat-calendar-period-button {
visibility: hidden;
}
https://material.angular.io/components/datepicker/api#MatDatepicker
Related
I want to hide the scroll bar for mat-select-filter and show only for mat-option in Angular .
In AppComponent.html
<mat-form-field class="input-permissions">
<mat-select
placeholder="Permissions"
multiple
[formControl]="permissionsControl"
disableOptionCentering
>
<mat-select-filter
[placeholder]="'Search Permissions'"
[array]="permissions"
(filteredReturn)="filteredList = $event"
[displayMember]="'appPermissions'"
[showSpinner]="false"
>
</mat-select-filter>
<mat-option
*ngFor="let permission of permissions"
[value]="permission.value"
>
{{ permission.value}}
</mat-option>
</mat-select>
</mat-form-field>
Now it is showing like this,
I want to show the scroll bar like this,
Any help would be appreciated.
I was able to solve this by using virtual scroll inside mat-select for mat-option in Angular.
https://material.angular.io/cdk/scrolling/overview
The dynamite solution is to use position:sticky and z-index properties. You can try adding the following CSS to the item you want to stay fixed while the items below it are scrollable:
.class-name {
top: 0px;
position: -webkit-sticky;
position: sticky;
z-index: 100;
}
I was using angular material. I find it very cool, well designed and user friendly.
I was trying to change or remove the calendar icon on datepicker directive.
<md-datepicker ng-model="myDate" md-placeholder="Enter date" ></md-datepicker>
The default icon is very good but i want to skip the icon in some case. well i can use svg icon using md-icon like this
<md-icon md-svg-src="calendar.svg"></md-icon>
Here is my sample plunker. Suggest me some idea to change/remove the default icon on datepicker.
Angular Material 1.1.0 has a solution, although it seems undocumented.
From angular-material/modules/js/datepicker/datepicker.js:
* #param {String=} md-hide-icons Determines which datepicker icons should be hidden. Note that this may cause the
* datepicker to not align properly with other components. **Use at your own risk.** Possible values are:
* * `"all"` - Hides all icons.
* * `"calendar"` - Only hides the calendar icon.
* * `"triangle"` - Only hides the triangle icon.
Usage:
<md-datepicker ng-model="myModel" md-hide-icons="calendar"></md-datepicker>
The original question was how to "to change or remove the calendar icon on datepicker directive."?
I just know how to remove it.
You can remove the calendar icon by simply putting the following in a CSS file and adding it to your page:
.md-datepicker-button {
display: none !important;
}
.md-datepicker-input-container {
margin-left: 0 !important;
}
Here is a better solution.
create a button with another icon and place it in the same div with datepicker
<div flex=40>
<md-icon md-svg-src="calendar.svg"></md-icon>
<md-datepicker ng-model="myDate" md-placeholder="Enter date" ></md-datepicker>
</div>
set the button postion to cover the orginal datepicker icon
<div flex=40>
<md-icon style="position:absolute;margin-top:15px; left:20px" md-svg-src="calendar.svg"></md-icon>
<md-datepicker ng-model="myDate" md-placeholder="Enter date" ></md-datepicker>
</div>
set the the original datepicker icon to apparent.
.md-datepicker md-icon {color: rgba(0,0,0,0) !important;}
.md-datepicker-open .md-datepicker-calendar-icon {fill:rgba(0,0,0,0)}
.md-datepicker-button.md-icon-button {
display: none;
}
This one works for me.
They do not provide an API option for specifying the icon, and as you can see from datepicker template.
The md-calendar icon is hard-coded inside the template. I suggest creating yourself a directive based from theirs and change it directly.
The solution provided by Ralph is kind of complex which is i have to create a new directive from their directive. I found a simple solution to this problem. The template of this md-calendar is using a button with an icon like this
<md-button class="md-datepicker-button md-icon-button" type="button"
tabindex="-1" aria-hidden="true"
ng-click="ctrl.openCalendarPane($event)">
<md-icon class="md-datepicker-calendar-icon" md-svg-icon="md- calendar">
</md-icon>
</md-button>
So i change the css of class md-datepicker-buttonand hide the button
.calendarDiv .md-datepicker-button{
display: none;
}
and use another custom icon like this
<md-icon md-svg-src="calendar.svg"></md-icon>
The icon isn't functional as default iconbut this would solve my problem .
This is my sample solution plunker.
You can change and hide the icon in the following way:
First give the md-datepicker an id (or class to target more then one):
<md-datepicker id="my-date-picker"></md-datepicker>
Then you can target the icon in css and change the color, size, display etc:
#my-date-picker .md-datepicker-calendar-icon {
color: green;
display: none;
}
md-datepicker now has a configuration attribute for hiding the icons. From the docs:
md-hide-icons String
Determines which datepicker icons should be hidden. Note that this may cause the datepicker to not align properly with other components. Use at your own risk. Possible values are:
"all" - Hides all icons.
"calendar" - Only hides the calendar icon.
"triangle" - Only hides the triangle icon.
Using CSS to override the default triangle icon (I want the calendar icon on the right) using a custom theme with the FontAwesome icon
/* override md material*/
.md-custom-theme .md-datepicker-input-container {
width: 100%;
border: none;
}
.md-custom-theme .md-datepicker-expand-triangle {
border:none;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-transform: none;
transform: none;
top: 6px;
right:0;
}
.md-custom-theme .md-datepicker-expand-triangle:before {
content: "\f073";
}
Just remove date-picker toggle for icon remove(I am using latest files of Angular Material)
<mat-form-field appearance="outline" (click)="from_date.open()">
<mat-label>From Date</mat-label>
<input matInput [matDatepicker]="from_date">
<mat-datepicker-toggle matSuffix [for]="from_date"></mat-datepicker-toggle>
<mat-datepicker #from_date></mat-datepicker>
</mat-form-field>
Remove this line
<mat-datepicker-toggle matSuffix [for]="from_date"></mat-datepicker-toggle>
You can use mat-icon in combination with mat-datepicker-toggle to change the calendar icon of mat-datepicker
<input [matDatepicker]="basicDatepicker">
<mat-datepicker-toggle [for]="basicDatepicker">
<mat-icon matDatepickerToggleIcon>
mouse
</mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #basicDatepicker></mat-datepicker>
instead if mouse you can use your costume icon by:
<mat-icon fontIcon="myCustomIcon"> </mat-icon>
For reference : https://www.angularjswiki.com/material/datepicker/
I know how to remove it.
Just copy and paste the code below in your css
div.layout-align-start-start.layout-row>.md-icon-button.md-button.md-ink-ripple:not(.md-raised){
display: none;}
My code looks like this:
<div class="block-border"
data-ng-show="qty > 0">
xxx
</div>
I know there have been a lot of changes with Animation in AngularJS. Can someone tell me the easiest way for me to make it take 500ms to show and 50ms to hide the xxx when the value of qty changes. Note that I am using the very latest AngularJS.
Reference angular-animate.js
Add ngAnimate as a dependent module:
var app = angular.module('app', ['ngAnimate']);
Pick a name for your transition, for example 'fade', and then define the appropriate CSS classes based on the naming convention described in the documentation:
.fade.ng-hide {
opacity: 0;
}
.fade.ng-hide-remove,
.fade.ng-hide-add {
display: block !important; /* or inline-block, as appropriate */
}
.fade.ng-hide-remove {
transition: all linear 1000ms;
}
.fade.ng-hide-add {
transition: all linear 500ms;
}
Add the class to your element:
<div class="block-border fade" ng-show="qty > 0">
Demo: http://plnkr.co/edit/HWi0FfDOsHeSOkcrRtN2?p=preview
I couldn't get the accepted answer to work, but the following did work (taken largely from this ng-nuggets post):
.fade {
transition: all linear 500ms;
opacity: 1;
}
.fade.ng-hide {
opacity: 0;
}
and then my HTML element which I wanted to fade in and out looked something like this:
<span data-ng-show="copyLinkClicked" class="fade">some text here</span>
As #MichaelNguyen mentioned, Bootstrap does appear to have a style already called fade, and we are using Bootstrap in our application, yet the above styles worked nonetheless. If you already have a style named fade, then change the name to something unique before using the above code.
If you want to fade in using ng-if as a boolean angular has some nice documentation here https://docs.angularjs.org/api/ngAnimate . I used ng-if for my fading purposes here's an example below:
form.html
<form name="exampleForm" ng-submit="submit()">
<input type="email" placeholder="Email Address" ng-model="email" required>
<input type="text" placeholder="Name" ng-model="name" required>
<input class="invalid-btn" ng-if="exampleForm.$invalid" type="submit" value="Invalid" />
<input class="valid-btn" ng-if="exampleForm.$valid" type="submit" value="Valid">
</form>
form.css
/* css for button that will show when form is invalid */
.invalid-btn {
border: 1px solid #222;
width: 100px;
height: 50px;
color: #222;
background: #fff;
}
.invalid-btn.ng-enter {
opacity: 1;
}
/* The finishing CSS styles for the enter animation */
.invalid-btn.ng-enter.ng-enter-active {
opacity: 0;
}
.valid-btn {
width: 100px;
height: 50px;
background: #F26623;
color: #fff;
}
/* The starting CSS styles for the enter animation */
.valid-btn.ng-enter {
transition:0.5s linear all;
opacity: 0;
}
.valid-btn.ng-enter-stagger {
/* this will have a 100ms delay between each successive leave animation */
transition-delay: 0.3s;
/* As of 1.4.4, this must always be set: it signals ngAnimate
to not accidentally inherit a delay property from another CSS class */
transition-duration: 0s;
}
/* The finishing CSS styles for the enter animation */
.valid-btn.ng-enter.ng-enter-active {
width: 100px;
height: 50px;
background: #F26623;
color: #fff;
opacity:1;
}
The way this works is if you want to fade in a button with a different color or text and different text color you can fade in a button when the form is filled out and valid and the invalid button will fade out leaving only one button depending on the state of the form. Kind of a hack but it works and looks smooth. I had to set a delay using .ng-enter-stagger because loading the animations at the same time was causing the buttons to blink and jump and not animate smoothly. So in this case we let invalid button hide first then load valid button when form is valid and all input fields have been filled out correctly.
I have an idea to change the theme on my web page. Here is my CSS that I am using:
html.darkBlue {
.block-content.light-tint-bg {
background: #fefefe;
border: 1px solid #777777;
color: #7b7b7b;
}
}
html.black {
.block-content.light-tint-bg {
background: #333333;
border: 1px solid #111111;
}
}
The idea is that I add a class to the HTML and depending on the class that is used it will use one theme or another.
But with Angular how could I make it switch? I was thinking of having an address kind of link but I am not sure how to switch between two classes?
I use a similar approach to #Davin Tryon, except like like this:
In the controller:
$scope.applied = false;
Then in the ng-class
ng-class="{true: 'applied', false: 'notApplied'}[applied]"
So based on the value of applied being true or false, it will apply the value of the property in the expression applied when true, and notApplied when false.
Edit:
Ok based on your comment:
http://jsfiddle.net/muLPT/
<div ng-app ng-class="background">
Hello World
<input type="button" ng-click="background = 'black'" value="black">
<input type="button" ng-click="background = 'red'" value="red">
<input type="button" ng-click="background = 'blue'" value="blue">
</div>
.black {
background: black;
}
.red {
background: red;
}
.blue {
background: blue;
}
This should do what you want.
Basically just changes the value of 'background' class to what ever value was clicked.
The sample is done on a div since I can't demo it on html from jdfiddle. Should work the same if its applied to html
You can use ng-class. Here are the docs.
ng-class allows you to resolve the class using an expression.
The example here shows usage:
<p ng-class="{applied: 1 == 1, notApplied: 1 == 0}">Example</p>
The expression 1 == 1 will resolve to true and the class 'applied' will be added to the class attribute.
In order to handle a click and toggle the class, you would create a scoped variable. For example this will toggle a clicked field that will add/remove the class:
<div ng-click="clicked = !clicked" ng-class="{black: clicked, darkBlue: !clicked}"></div>
This is very straightforward but I am not able to change the class.
I am basically verifying if the date is in correct format (DD-MMM-YYYY hh:mm:ss).
<input type="text" style="width : 80%" ng-model="startTime" ng-class="{invalid: !isValid ,valid: isValid}" />
where isValid is a scope variable which evaluates to true and false. The css class is not applied.
Here is the plnkr.
It is working. Inspect the element. Your bootstrap classes are overwriting it. Try this:
.invalid {
background-color: #FA787E !important;
}
.valid {
background-color: #78FA89 !important;
}