标签: angular-material2

我正在尝试使用Angular Material 2的MdToolTip.语法如下

<span mdTooltip="Tooltip!">I have a tooltip</span>

但是,我想在我的锚标签上实现此功能.当class ="not-active"正在运行时,当我将鼠标悬停在ahchor标签上时,我想显示工具提示.我怎么能实现这个目标？

<a [ngClass]="{'not-active': !isCurrentUserExist}" [routerLink]="['/create-timesheet']">Link1</a>


/*disabled side menu links*/
.not-active {
   pointer-events: none;
   cursor: default;
}

我正在使用角度2素材的主题之一.我可以使用材料组件上的主题颜色,如按钮,工具栏使用color ="primary".但我无法弄清楚如何主题div.我不想在.css文件中对哈希进行硬编码,因为如果我决定更改主题,它将需要在所有地方进行更改.我错过了什么吗？最好的方法是什么？

我正在使用最新的Angular和最新的Angular Material.我有一个datepicker,我想添加一些验证.文档说该required属性应该开箱即用,但它似乎不像其他表单元素那样处理错误.

这是我的加价:

<mat-form-field class="full-width">
    <input matInput [matDatepicker]="dob" placeholder="Date of birth" [(ngModel)]="myService.request.dob" #dob="ngModel" required app-validateAdult>
    <mat-datepicker-toggle matSuffix [for]="dob"></mat-datepicker-toggle>
    <mat-datepicker #dob></mat-datepicker>
    <mat-error *ngIf="dob.errors && dob.errors.required">Your date of birth is required</mat-error>
</mat-form-field>

这适用于happy-path,因此当选择日期时,日期最终会出现在期望的属性中myService.

然而,验证并不像我期望的那样有效; 在这种情况下,如果我在没有输入日期的情况下单击该字段然后退出该字段,则输入会获得红色样式,但通常的[controlName].errors对象不会被填充.这意味着以通常的方式显示错误消息(与同一页面上不是日期选择器的其他输入一起使用的方式)不起作用:

<mat-error *ngIf="dob.errors && dob.errors.required">Your date of birth is required</mat-error>

在*ngIf因为日期选择器似乎从来没有更新是不正确的dob.errors,这样就不会显示错误消息,即使输入的样式为无效.

这是正确的吗？我错过了什么吗？

我还尝试添加一个自定义指令来验证使用datepicker选择的日期表明用户已超过18:

export class AdultValidator implements Validator {
  constructor(
    @Attribute('app-validateAdult') public validateAdult: string
  ) { }

  validate(control: AbstractControl): { [key: string]: any } {
    const …

如何使用vanilla CSS,HTML或JS更改Angular 2+ Material Design上SVG图标的大小？

如果我在HTML元素中指定图标,样式工作正常:

<mat-icon style="font-size: 16px !important">home</mat-icon>

但是,当我使用该svgIcon属性时(例如,如果使用第三方图标库),则无法调整图标大小:

<mat-icon style="font-size: 16px !important" svgIcon="home"></mat-icon>

我知道SVG的扩展比较复杂,我可以使用该viewBox属性.但是,我甚至无法访问<svg>里面的子元素<mat-icon>做一个丑陋的JS hack.使用vanilla CSS有一种直接的方式吗？甚至是Angular组件的丑陋黑客？

额外信息:我正在使用https://materialdesignicons.com上的mdi.svg图标库来获取我的Angular项目的其他图标.但是,要使用这些,我必须使用该属性.svgIcon

我试图使用配置传递一些属性值.但对话框无法全屏显示.

openTwigTemplate(): void {
  let config = new MdDialogConfig();
  config = {
    position: {
      top: '10px',
      right: '10px'
    },
    height: '98%',
    width: '100vw',
  };
  const dailog = this.dialog.open(TwigDialogComponent, config);
}

如何根据分辨率打开对话框全屏？

我需要修改标准Angular Material切换按钮组件的功能，以便单击活动按钮可使该组件返回没有按钮处于活动状态。这有两个步骤：

• 更新切换组的值
• 将点击按钮的“ checked”参数更改为false

我尝试了几种方法，例如

模板：

<mat-button-toggle-group #group="matButtonToggleGroup">
    <mat-button-toggle #no_btn value="no" (click)="update_toggle(group,no_btn)">No</mat-button-toggle>
    <mat-button-toggle #yes_btn value="yes" (click)="update_toggle(group,yes_btn)">Yes</mat-button-toggle>
</mat-button-toggle-group>

JS：

update_toggle(group,button){
    if(group.value==""){
        group.value = button.value;
    }
    else
    {
        group.value = "";
    }
button.checked=!button.checked;
}

但这不会更新按钮的“已检查”值，我想是因为update_toggle（）设置的组值与用户单击按钮的行为相冲突。

唯一有效的方法是：

<mat-button-toggle-group #group="matButtonToggleGroup">
    <mat-button-toggle #no_btn value="no" (click)="update_toggle(group,no_btn)" (click)="group.value=='no' ? checked=false : checked=false">No</mat-button-toggle>
    <mat-button-toggle #yes_btn value="yes" (click)="update_toggle(group,yes_btn)" (click)="group.value=='yes' ? checked=false : checked=false">Yes</mat-button-toggle>
</mat-button-toggle-group>

但是单个按钮上的两次单击事件感觉很棘手，特别是因为第二次单击中的三进制与本能地相反。

有什么更好的建议吗？

我试过了：

@ViewChildren('no_btn') no_btn: ElementRef;

然后：

this.no_btn['_results'][k]['_inputElement']['nativeElement']['checked']=false;

但是结果似乎与在函数中传递按钮引用没有什么不同。再次单击该按钮不会取消选中它。禁用确实有效，所以我认为我的代码是正确的：

this.no_btn['_results'][k]['_inputElement']['nativeElement']['disabled']=true;

从Angular Material Documentation 中，我可以direction在菜单组件上使用一个属性：

direction: Direction ：菜单的布局方向。

这意味着有一个类型, Direction，但我找不到它，也不知道如何在菜单组件上使用它。

我尝试了以下方法，但我不确定可以在direction-attribute 中放入哪些值。我以为我可以使用类似Direction.UP或 的东西Direction.DOWN，但我无法Direction在我的项目中找到该类。是否有隐藏的地方可以从中导入？

<button mat-raised-button type="button" [matMenuTriggerFor]="saveBtn" color="primary">Ny rad</button>
<mat-menu #saveBtn="matMenu" [direction]="'up'"> <!-- Here I am using [direction], but do not know what to put as a value there, that is of type Direction -->
<button mat-menu-item (click)="save('1')">Save 1</button>
<button mat-menu-item (click)="save('2')">Save 2</button>
</mat-menu>

编辑

搜索了一段时间后，我发现我可以使用值'ltr'and 'rtl'，我不得不在使用matMenuTriggerFor- 选择器的元素上使用它。

Direction在 Visual Studio Code …

我有个问题。我没有在堆栈上找到任何熟悉的问题，所以我在这里问，是否可以<mat-selection-list>滚动（Angular 7）？当项目太多而无法容纳一个窗口时，我想在右侧显示滚动条。

<mat-card fxFlex="33%">
<mat-selection-list>
  <mat-list-item
    *ngFor="let product of products"
    [class.selected]="product === selectedproduct"
    (click)="onSelect(product)"
  >
  </mat-list-item>
</mat-selection-list>

我mat-autocomplete在我的 Angular 应用程序下使用小部件：

    <mat-form-field class="col-md-3" color="warn">
                <input type="text"
                       id="libelleShop"
                       #inputSelectShop
                       placeholder="Selectionner la boutique"
                       matInput
                       formControlName="libelleShop"
                       ngDefaultControl
                       [matAutocomplete]="auto">
                <mat-autocomplete #auto="matAutocomplete"" 
               (optionSelected)="onShopSelectionChanged($event)">
                  <mat-option *ngFor="let shop of shopData" [value]="shop.value">
                    {{shop.name}}
                  </mat-option>
                </mat-autocomplete>
   </mat-form-field>

我的商店数据是这样的：

shopData = [
    {name: 'AAA' , value :'11'},
    {name: 'BBB', value :'22'},
    {name: 'CCC', value : '33'}
  ];

这样的-选项被显示name，但在选择由输入displaysitvalue不是name。

知道我需要其他治疗的价值，我不会改变[value]的mat-automplete。

我如何将名称引用到输入中？

建议？？

我正在使用一个处理日期的Angular9应用程序。它显示并更新多个<mat-datepicker>字段。

我正在使用https://www.npmjs.com/package/@angular/material-moment-adapter 中的自定义MAT_DATE_FORMATS和MomentDateAdapter( @angular/material-moment-adapter) 。

我正在使用以下代码可以正常工作：

export const APP_MOMENT_DATE_FORMATS =
{    
  parse: {},
  display: {
    dateInput: 'YYYY/MM/DD/MM',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY'
  }
};

//..
providers: [
  {
     provide: MAT_DATE_FORMATS, useValue: APP_MOMENT_DATE_FORMATS
  },
  {
    provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]
  }
]
// ..

Stackblitz 演示：https ://stackblitz.com/edit/angular-formatted-datepicker-vdtaqj ? file = app%2Fdatepicker-overview-example.ts

现在，我想知道我是否可以APP_MOMENT_DATE_FORMATS.display.dateInput 动态更新值- 例如：它可能是通过 http 请求从配置服务设置的，或者我可能会在界面中显示一个选择器。

例子： …