angular-material

问题 For implementing a spy nav bar in my Angular app in a MatDialog component. I implemented a directive to spy for the scroll event using @HostListener('window:scroll', ['$event']) I also tried 'scroll' as event name. But the event does not seem to fire. I tried several approaches, e. g. by using the HostListener directly in the dialog component, by using the JavaScript window.onscroll() function and the rxjs fromEvent() function but without success. Trying other css events (e. g. window:click )

问题 My Date Pipe is not working in Angular. I only want to show as this format MM/dd/yyyy'. How can it be fixed? Typescript: this.testDate = new Date(this.singleUser.createDate); console.log(this.testDate); this.userForm = new FormGroup({ userName: new FormControl(this.singleUser.userName), email: new FormControl(this.singleUser.email), createDate: new FormControl(this.singleUser.createDate) }); Console Log: Wed Jul 22 2020 17:18:24 GMT-0700 (Pacific Daylight Time) HTML: <mat-form-field class=

问题 My Date Pipe is not working in Angular. I only want to show as this format MM/dd/yyyy'. How can it be fixed? Typescript: this.testDate = new Date(this.singleUser.createDate); console.log(this.testDate); this.userForm = new FormGroup({ userName: new FormControl(this.singleUser.userName), email: new FormControl(this.singleUser.email), createDate: new FormControl(this.singleUser.createDate) }); Console Log: Wed Jul 22 2020 17:18:24 GMT-0700 (Pacific Daylight Time) HTML: <mat-form-field class=

问题 I do have material table where I am using the 9 columns, I would like to maintain same column size even if the screen reduces. Currently, When I reduce my screen last column is shirking first which looks bit odd as other groups are still having equal size. Is there anyway we can support same column size for "total settlement amount"even screen size reduces? Below is my stackblitz https://stackblitz.com/edit/angular-bklajw-5foa62?file=app%2Ftable-basic-example.ts Image Updated 回答1: Thanks for

问题 I do have material table where I am using the 9 columns, I would like to maintain same column size even if the screen reduces. Currently, When I reduce my screen last column is shirking first which looks bit odd as other groups are still having equal size. Is there anyway we can support same column size for "total settlement amount"even screen size reduces? Below is my stackblitz https://stackblitz.com/edit/angular-bklajw-5foa62?file=app%2Ftable-basic-example.ts Image Updated 回答1: Thanks for

问题 I have implemented a functionality of deletion and on successful completion I have to display a snackbar with the message received from backend. I am able to get the correct response but the snackbar is not accessible. I think the scope is different as it is mat-dialog table from where I am deleting a user. TS Code: @Component({ selector: 'app', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) export class AppComponent implements OnInit { constructor( public

问题 I have implemented a functionality of deletion and on successful completion I have to display a snackbar with the message received from backend. I am able to get the correct response but the snackbar is not accessible. I think the scope is different as it is mat-dialog table from where I am deleting a user. TS Code: @Component({ selector: 'app', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) export class AppComponent implements OnInit { constructor( public

问题 I would like to hide several rows which meet some condition (such as disabled: true ). html: <mat-form-field> <mat-label>Filter</mat-label> <input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium" #input> </mat-form-field> <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <!-- Position Column --> <ng-container matColumnDef="position"> <th mat-header-cell *matHeaderCellDef> No. </th> <td mat-cell *matCellDef="let element"> {{element.position}} </td> </ng-container

问题 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"

问题 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"