angular-material

问题 I am trying to position tooltip of mat-paginator closer to the pagination buttons. Currently, tooltip is too far away, see below: I tried to update .cdk-overlay-pane and .mat-tooltip-panel classes but didn't work for me. Any points are highly appreciated! 回答1: Need to go deep inside component ::ng-deep body .cdk-overlay-container { .mat-tooltip { top: 104px; } } 回答2: apply bottom style to mat-tooltip-panel class. It can resolve the issue..and it worked for me ::ng-deep body .cdk-overlay

问题 I have a website that is using Angular material. I like elements and everything except default font sizes and elements are huge. To see website in acceptable scale me or my users have to zoom out at least 75% on the desktop and majority of my users are desktop users. Is there a way to specify in angular material to use smaller fonts, elements, etc? 回答1: in your main css file add following html { font-size: 62.5% // adjust the size with percentage here. } and i recommend using em and rem for

问题 I have a custom component, it's a wrap for mat-select. How can I use it in others component's? I was reading about formControl and controlValueAccessor, but I don't understand alot. my custom.html <mat-select> <mat-option [value]="opt" *ngFor="let op of opt; index as i">{{opt[i]}}</mat-option> </mat-select> <input matInput> my custom.ts import { Component, OnInit, Input } from '@angular/core'; import { MatFormFieldControl } from '@angular/material/form-field'; @Component({ selector: 'cust

问题 I have a custom component, it's a wrap for mat-select. How can I use it in others component's? I was reading about formControl and controlValueAccessor, but I don't understand alot. my custom.html <mat-select> <mat-option [value]="opt" *ngFor="let op of opt; index as i">{{opt[i]}}</mat-option> </mat-select> <input matInput> my custom.ts import { Component, OnInit, Input } from '@angular/core'; import { MatFormFieldControl } from '@angular/material/form-field'; @Component({ selector: 'cust

问题 Structure Question I'm not quite sure If I found the right place for this 2 code lines: providers: [ { provide: MAT_DATE_LOCALE, useValue: 'de-DE' }, { provide: DateAdapter, useClass: CustomDateAdapter, deps: [MAT_DATE_LOCALE, Platform] } ] Currently they are in my material.module => which is imported in shared.module => which is imported in app.module and every lazy loaded module. CustomDateAdapter: @Injectable() export class CustomDateAdapter extends NativeDateAdapter { subscription: any;

问题 Structure Question I'm not quite sure If I found the right place for this 2 code lines: providers: [ { provide: MAT_DATE_LOCALE, useValue: 'de-DE' }, { provide: DateAdapter, useClass: CustomDateAdapter, deps: [MAT_DATE_LOCALE, Platform] } ] Currently they are in my material.module => which is imported in shared.module => which is imported in app.module and every lazy loaded module. CustomDateAdapter: @Injectable() export class CustomDateAdapter extends NativeDateAdapter { subscription: any;

问题 I have an Angular Material table in which I want to fetch data from a service. This is my service. import { Injectable } from "@angular/core"; import { HttpClient } from "@angular/common/http"; import { Message } from '../messages/message-table/message.model'; @Injectable() export class MessageService { constructor(private http: HttpClient) {} getMessageTableData() { return this.http.get<Message[]>('<removed>'); } } This is the interface Message for the data export interface Message {

问题 I have an Angular Material table in which I want to fetch data from a service. This is my service. import { Injectable } from "@angular/core"; import { HttpClient } from "@angular/common/http"; import { Message } from '../messages/message-table/message.model'; @Injectable() export class MessageService { constructor(private http: HttpClient) {} getMessageTableData() { return this.http.get<Message[]>('<removed>'); } } This is the interface Message for the data export interface Message {

问题 Every example of a debounce function that I've seen so far prevents an action from happening multiple times for a specified time span, and then executes the action one time when the specified time span has elapsed, then resets the timer. For example, the $mdUtil.debounce function that is included in Angular Material. What I'm looking for is a debounce function that executes the action immediately and then prevents subsequent multiple actions from firing until the timer resets. This has the

问题 I'm trying to integrate Angular material's virtual scrolling with drag and drop, but for some reason when i'm trying to implement this it reverts the items and when i'm trying to drag and drop an element it doesn't work. Here is a summary of the code <cdk-virtual-scroll-viewport cdkDropList itemSize="50" class="example-viewport"> <div cdkDrag *cdkVirtualFor="let item of items" class="example-item">{{item}}</div> </cdk-virtual-scroll-viewport> As you can see, I didn't do anything special,