angular-material

using md-cards in a md-grid-list in Angular 2 material

由 与世无争的帅哥 提交于 2020-01-14 12:55:33
问题 I am new to angular 2 material design. What I am trying to achieve is to create a grid list using angular2 material and place md-cards inside md-grid-tile. Though the md-card have position:relative, they are overflowing the md-grid-tile. click this link, the cards are overlapping and they are overflowing the md-grid-tile in a md-grid-list Following is the code that I have used: <body> <md-toolbar layout="row"> <md-button class="menu"> <md-icon md-svg-icon="menu"></md-icon> </md-button> <h3

Only include modules from Angular Material that I need

由 早过忘川 提交于 2020-01-14 12:53:08
问题 I'm using the module $mdDialog from Angular Material but I don't need the full library. Is it possible to only include the modules that I need in the project, and how can I do that? I have installed Angular Material with Bower and using Gulp in my project. 回答1: Soon Angular Material will turn into v1.1.0 as a major release. As an addition the material-tools repository will be announced . Material Tools allows developers to build a custom Angular Material build with the most necessary

Only include modules from Angular Material that I need

由 核能气质少年 提交于 2020-01-14 12:52:16
问题 I'm using the module $mdDialog from Angular Material but I don't need the full library. Is it possible to only include the modules that I need in the project, and how can I do that? I have installed Angular Material with Bower and using Gulp in my project. 回答1: Soon Angular Material will turn into v1.1.0 as a major release. As an addition the material-tools repository will be announced . Material Tools allows developers to build a custom Angular Material build with the most necessary

Only include modules from Angular Material that I need

由 試著忘記壹切 提交于 2020-01-14 12:52:09
问题 I'm using the module $mdDialog from Angular Material but I don't need the full library. Is it possible to only include the modules that I need in the project, and how can I do that? I have installed Angular Material with Bower and using Gulp in my project. 回答1: Soon Angular Material will turn into v1.1.0 as a major release. As an addition the material-tools repository will be announced . Material Tools allows developers to build a custom Angular Material build with the most necessary

How to add 'All' option for Angular Material paginator?

由 两盒软妹~` 提交于 2020-01-14 09:10:12
问题 I would like an option to display all rows in the table. Angular Material only supports numbers for page size options. I need something like this: [pageSizeOptions]="[5, 10, 25, 50, 100, 'All']" 回答1: You could try this: [dataSource] = "dataSource" ... [pageSizeOptions] = "[5, 10, 25, 50, 100, dataSource.data.length]" 回答2: please see the actual result https://stackblitz.com/edit/angular-hpnbha-z4l4zf?file=app/table-pagination-example.ts 1) table-pagination-example.html <mat-paginator

Angular Material, Md-datepicker - open date-picker on input click

由 我的未来我决定 提交于 2020-01-14 07:48:07
问题 I want to open calendar where user chooses date from date-picker not only when user clicks on calendar icon, but also when clicks on input field. Material DatePicker. So I create directive for this, attaching it to <md-datepicker> and also watching for (click) event on input: Html: <md-form-field class="field-half-width"> <input mdInput [mdDatepicker]="picker2" placeholder="Galioja iki" formControlName="dateUntil" (click)="clickInp()"> <md-datepicker-toggle id="calendar" mdSuffix [for]=

How to create range slider (Angular Material) in Angular 4?

由 最后都变了- 提交于 2020-01-14 07:38:48
问题 As a default, there is no range slider in Angular Material. Are there any ways use range slider in Angular 4? 回答1: As for me https://www.npmjs.com/package/ng2-nouislider the best for Angular 4. 回答2: use my range slider its based on material angular slider libry and its modifyd by me repository have simple angular 7 application with sample range slider https://github.com/dinukasaminda/angular-material-range-slider 回答3: Angular 8 I was facing the same issue of creating a range slider in angular

Overriding the encapsulated CSS of external component

由 允我心安 提交于 2020-01-14 07:22:10
问题 I was wondering how to override the encapsulated CSS of an external component. So I am using material2 in my project and the tabs component has a the attribute overflow set on tab-body . Is it possible to override the overflow value? 回答1: You can use the special css /deep/ instruction. See the documentation So, if you have app sub-component target-component <div class="target-class">...</div> You can put in your apps css (or less): /deep/ .target-class { width: 20px; background: #ff0000; }

Is there a way to generate a mat-tree from a Database?

由 耗尽温柔 提交于 2020-01-14 05:37:07
问题 I am currently working on a project using angular and Spring frameworks. I need to generate a nested Tree (mat-tree from Angular Material) from my database, and not from a static json table in the component. I know how to get the data I want, but I can't figure out how to use it in order to generate the tree. I used this angular material example https://stackblitz.com/angular/bevqmbljkrg, and I would like to use my Database data instead of TREE_DATA. Any help would be much appreciated! The

Angular material date picker how to show the title

由 拈花ヽ惹草 提交于 2020-01-14 03:36:11
问题 I need to show the title or importance of the day when user hover particular day. When user mouse over the calendar popup eg: December 25th i need to show a message "Happy Christmas". I tried following HTML but its not working <mat-form-field> <input matInput [matDatepicker]="picker" (click)="picker.open()" placeholder="Choose a date"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker [dateClass]="dateClass" title="ariaLabel"></mat-datepicker> <
订阅 angular-material