angular-material

问题 I would like to filter my mat-table result by column using the predicate filter. Im already using a simple filter but it filtering all the data in all the column. I search for similar topics but i don't know how use it. I try to repeat my code for all the column but doesn't work.. See code below : <mat-form-field> <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"> </mat-form-field> <div class="example-container mat-elevation-z8"> <div class="example-header"> <div

问题 I've been trying to figure out a way to use $mdTheming service provided by angular-material library to apply theme configured through $mdThemingProvider . In Simpler terms: Consider an element <div class="md-primary" theme></div> The theme directive in this case has to inject the primary color configure to the theme. Below is the approach I tried to use, after going through angular-material 's code Just to see how they might have done it export function ThemeDirective($mdTheming) { 'ngInject'

问题 I try to implement this behavior http://jsfiddle.net/Aneeshmohan/qbxfbmtt/ in angular 8. I use angular cdk drag-drop module https://stackblitz.com/edit/angular-4ppaey?file=src%2Fapp%2Fapp.module.ts but I have some problems: $('.dragger').draggable({ revert: "invalid", helper: function () { //Code here return $("<div class='dragger'></div>").append("Hi"); } }); $(".dropper").droppable({ drop: function (event, ui) { $(this) .addClass("ui-state-highlight") .find("p") .html("Dropped!"); var

问题 As per the question, I have a date range picker with start and end dates as part of a mat-form-field . I want to perform a custom validation (for example, to ensure the absolute difference between start and end is not longer than 15 days) and display a mat-error inside the mat-form-field informing the user about the issue. I also want to have multiple such validators and error messages. The errors are set on the form group correctly, but they are not displayed since the form field does not

问题 I need help in customizing the angular material date picker i.e,https://material.angular.io/components/datepicker/overview. The calendar should not close once we click on the date. I should be able to have 2 buttons, one is 'cancel' and another is 'save'. Once the save button is clicked, the calendar should be closed. 回答1: I don't know if it's a better solution, but based on this SO answer, I think that the solution is use a menu with a calendar inside. As we need an input we need at least

问题 I need help in customizing the angular material date picker i.e,https://material.angular.io/components/datepicker/overview. The calendar should not close once we click on the date. I should be able to have 2 buttons, one is 'cancel' and another is 'save'. Once the save button is clicked, the calendar should be closed. 回答1: I don't know if it's a better solution, but based on this SO answer, I think that the solution is use a menu with a calendar inside. As we need an input we need at least

问题 I'm trying to implement sorting on my angular material data table. It's displaying the data correctly but the sorting doesn't work, it doesn't even show the small arrow next to the header to indicate it's being sorted. Here's my component import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { ToastrService } from 'ngx-toastr'; import { Project, Activity, LearningObjective } from '../../models'; import {

问题 When I checked the slide toggle it should work as expected. But when I try to uncheck it there is a confirmation window asking if you are sure. When I click cancel in that confirmation window, still the toggle changes to unchecked, which shouldn't happen. It should stay in the same state. Here is my Html and TS Code // html <mat-slide-toggle (change)="change($event)" [checked]="isChecked()" > To-pay </mat-slide-toggle> TS code: // ts change(e) { if(this.checked) { if(confirm("Are you sure"))

问题 I am using a API call to fetch the image from service and I would like to use a progress bar until the image is fetched. Probably I need to set the progress bar in service as the image is returned from service response. How to use for this scenario. Any help on this is much appreciated. Thanks. HTML: <div class="info_image" *ngIf="profileImage"> <ngx-image-zoom [fullImage]="profileImage" [thumbImage]="profileImage" zoomMode='hover' ></ngx-image-zoom> </div> <div *ngIf="!profileImage"> We

问题 I am working on an angular application and I am using mat form fields in it. For changing color of botttom border of mat form field I am using mat-form-field-ripple css which is inbuilt for mat form field. CSS is as follows. .mat-form-field-ripple { background-color: #f9c940!important; } When I use this CSS, it automatically gets applied to all form fields. I have to apply #f9c940 color in mat-form-filed-ripple in when one condition is true and a different color when another condition is true