angular-material

问题 How can i handle long value in mat-select? Can i add horizontal scroll? or can i make the long option value to be 2 line? i have tried add virtual-scroll class what i got from here, but i got error <mat-select formControlName="fieldOfWork" placeholder="Pilih bidang pekerjaan" class="virtual-scroll" required> <mat-option [value]="null">Pilih bidang pekerjaan</mat-option> <mat-option *ngFor="let fieldOfWork of fieldOfWorks" [value]="fieldOfWork?.value"> {{fieldOfWork?.label}} </mat-option> <

问题 I would like to catch the event that comes from the month "left" and "right" selection buttons, but I couldn't find any documentation about it. What events are fired when the "left" and "right" month selection boxes are clicked in the Material Datepicker? 回答1: Well, my another response is wrong, Let's go to take another aproach. Imagine we has a CustomTemplate Header. As we want that it's looks like the original DatePicker header we are copy the template of this that is in gitHub of angular,

问题 I am very new to Angular. I recently added Angular Material tab in my app project similar to the one below. <mat-tab-group> <mat-tab label="First" class="firstTab"> Content 1 </mat-tab> <mat-tab label="Second" class="secondTab"> Content 2 </mat-tab> <mat-tab label="Third" class="thirdTab"> Content 3 </mat-tab> </mat-tab-group> In my app, I sometimes need to bring certain tabs to a user's attention. The approach I was thinking of, is by highlighting the tab of interest by giving it the below

问题 I have an angular project that is using mat-table and mat-paginator for a certain view, the problem is the view has a grid view and table view with a toggle, the grid view is default and table is hidden using an NgIf when the grid view is active. If I set the default to the table view then pagination works fine unless I swap to grid view and back, if the default if set to grid it breaks when I swap to the table view. I'm guessing its because the table is hidden when this code runs: this

问题 I need to make the Header of the mat-table component fixed to the top, But It doesn't work. I have Angular v6.1.7 and @angular/material v6.4.7. I added the "sticky: true" propertie to the matHeaderRowDef as someone mentions here but it doesn't do anything :( <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr> I have this example project: https://stackblitz.com/edit/angular-wem2qa This is my imports on the TS file: import { Component, Input, OnChanges, OnInit,

问题 I am running into an issue with a simple adjust of a mat-form-field that holds my autocomplete input. From the image you can see if it's outside the mat-toolbar height, but I have not found a simple way to adjust the height of the entire input so it can stay inside the toolbar area. Width works fine. Height does not. input outside toolbar My html code is as follows: <mat-toolbar > <span style="width:200px">Test</span> <label>{{prodPointId}}</label> <form class="example-form" > <mat-form-field

问题 We have an autocomplete input with required validation. When a user searches for an option by entering a query (but doesn't pick any of the options) then the input is valid, even though it doesn't match any of the suggested options. What I want to achieve is not permitting the user to post the form unless one of the suggested options is selected. How do I achieve this? <mat-form-field> <input matInput placeholder="Pick one" aria-label="pick one" [matAutocomplete]="auto" [formControl]="form

问题 I added the example retrieved from https://material.angular.io/components/tree/overview (The example can be seen[https://stackblitz.com/angular/arbvompqpmg?file=main.ts]) the documentation but it throw this error: Can't bind to 'dataSource' since it isn't a known property of 'mat-tree'. 1. If 'mat-tree' is an Angular component and it has 'dataSource' input, then verify that it is part of this module. 2. If 'mat-tree' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule

问题 I am using simple form-field input component as in below code <mat-form-field class="example-form-field" > <input matInput type="search" placeholder="Search" > </mat-form-field> On entering the input fieled by default the placeholder will go above. How can i hide the placeholder on entering to the input field? 回答1: You can try: DEMO ----> Solution You can also create Directive for same You can replace (click) ----> (focus) as you need <mat-form-field floatLabel=never> <input (click)=

问题 I have recently started using AngularJS but I have run into a problem when using md-tabs (https://material.angularjs.org/latest/demo/tabs). On my page, I have several tabs and there are approaximately 30 images placed in each tab via ng-repeat. The problem is that all of the images in all of the tabs are loading when the page is opened which is taking a long time. I would prefer if only the content of the first (active) tab was loaded when the page is opened and that the content of all the