angular-material

问题 So I made my own lib-input component with custom styles that looks something like this: <div class="input"> <mat-form-field appearance="outline"> <input matInput [type]="type" placeholder="{{placeholder}}" [(ngModel)]="input" (input)="onChange()"> <ng-content></ng-content> </mat-form-field> </div> Now I want to use this lib-input with its custom styles for an input field that uses autocomplete. Something like this: <mat-form-field> <lib-input type="text" matInput [formControl]="myControl"

问题 My project is essentially displaying a bunch of boxes on a screen. Essentially, each box holds a button that, when clicked, will link you to another page. This is the box object. export interface Allbox { image: string, link: string, button_name: string, info: string; description: string; } {image: 'assets/image.png', link: 'link1.com', button_name: 'B1', info: 'assets/mat-info2.png', description: `this is the description.` }, {image: 'assets/image.png', link: 'link2.com', button_name: 'B2',

问题 My project is essentially displaying a bunch of boxes on a screen. Essentially, each box holds a button that, when clicked, will link you to another page. This is the box object. export interface Allbox { image: string, link: string, button_name: string, info: string; description: string; } {image: 'assets/image.png', link: 'link1.com', button_name: 'B1', info: 'assets/mat-info2.png', description: `this is the description.` }, {image: 'assets/image.png', link: 'link2.com', button_name: 'B2',

问题 My project is essentially displaying a bunch of boxes on a screen. Essentially, each box holds a button that, when clicked, will link you to another page. This is the box object. export interface Allbox { image: string, link: string, button_name: string, info: string; description: string; } {image: 'assets/image.png', link: 'link1.com', button_name: 'B1', info: 'assets/mat-info2.png', description: `this is the description.` }, {image: 'assets/image.png', link: 'link2.com', button_name: 'B2',

问题 I would like to use the angular material mat-select component without the mat-form-field , I want it to be conceptually similar to the native select element. Is there a way to achieve that? 回答1: A simple approach is to use a mat-menu and update the trigger on button-click. demo using mat-menu component. If you don't want to use a menu but a mat-select , here is a solution which uses the select component and also ensures the panel is positioned properly when opened: demo using mat-select

问题 I would like to use the angular material mat-select component without the mat-form-field , I want it to be conceptually similar to the native select element. Is there a way to achieve that? 回答1: A simple approach is to use a mat-menu and update the trigger on button-click. demo using mat-menu component. If you don't want to use a menu but a mat-select , here is a solution which uses the select component and also ensures the panel is positioned properly when opened: demo using mat-select

问题 I am using this UI component from the Angular material. https://material.angular.io/components/datepicker/overview#customizing-the-calendar-header I want to add close button the custom header but it seems not possible yet. At least I would like to get output event from the date picker header component. 回答1: As the MatDatepicker and MatCalendarHeader are two separate components, you will need to pass data between the components using an EventEmitter , or with BehaviourSubject through the use

问题 I am using this UI component from the Angular material. https://material.angular.io/components/datepicker/overview#customizing-the-calendar-header I want to add close button the custom header but it seems not possible yet. At least I would like to get output event from the date picker header component. 回答1: As the MatDatepicker and MatCalendarHeader are two separate components, you will need to pass data between the components using an EventEmitter , or with BehaviourSubject through the use

问题 To get a Locale aware (in regards of start of the week) Material DatePicker i created this extension: import { Injectable } from "@angular/core"; import { LOCALE_ID, Inject } from "@angular/core"; import { Platform } from "@angular/cdk/platform"; import { getLocaleFirstDayOfWeek } from "@angular/common"; import { NativeDateAdapter } from '@angular/material/core'; @Injectable({providedIn: 'root'}) export class LocaleDateAdapter extends NativeDateAdapter { constructor(@Inject(LOCALE_ID) public

问题 So I want to make my version of the Battleships game in Angular and to do that I need a 10x10 matrix in which I can drag and drop the ships ( if you played the game you know what I am talking about ) and I'm using the Angular Cdk but I cannot make it work at all. What I have tried so far is make a table out of divs, ships elements aside and drag and drop them on the board but I can't connect the two arrays because the array of ships is not nested and the board is. Edit: Here is the link to