angular-material

Implement a search filter for the component of angular material

by

HTML <h4>mat-select</h4> <mat-form-field> <mat-label>State</mat-label> <mat-select> <input (keyup)=”onKey($event.target.value)”> // **Send user input to TS** <mat-option>None</mat-option> <mat-option *ngFor=”let state of selectedStates” [value]=”state”>{{state}}</mat-option> </mat-select> </mat-form-field> TS states: string[] = [ ‘Alabama’, ‘Alaska’, ‘Arizona’, ‘Arkansas’, ‘California’, ‘Colorado’, ‘Connecticut’, ‘Delaware’, ‘Florida’, ‘Georgia’, ‘Hawaii’, ‘Idaho’, ‘Illinois’, ‘Indiana’, ‘Iowa’, ‘Kansas’, ‘Kentucky’, ‘Louisiana’, ‘Maine’, ‘Maryland’, ‘Massachusetts’, ‘Michigan’, ‘Minnesota’, ‘Mississippi’, ‘Missouri’, ‘Montana’, ‘Nebraska’, ‘Nevada’, … Read more

custom filter in mat-table

by

I found the solution here. It’s necessary to rewrite filterPredicate, and just use it as usual, filterPredicate needs to return true when filter passes and false when it doesn’t export interface Element { name: string; position: number; weight: number; symbol: string; } dataSource = new MatTableDataSource(ELEMENT_DATA); /* configure filter */ this.dataSource.filterPredicate = (data: Element, filter: … Read more

In Angular Material what does setting up global typography styles mean?

by

By default, Angular Material doesn’t apply global CSS. Meaning that a standard element (eg. <h1>) will not have Angular materials’ styles applied to it. So, when configured this way, in order to apply Angular material styles to a broad section of your HTML, you can use the mat-typography class <h1>This header doesn’t have Angular Material … Read more

How can i make a MatDialog draggable / Angular Material

by

Update since Angular Material 7 You can simply use cdkDrag directive from @angular/cdk/drag-drop dialog.html <h1 mat-dialog-title cdkDrag cdkDragRootElement=”.cdk-overlay-pane” cdkDragHandle> Hi {{data.name}} </h1> Stackblitz Example Previous answer: Since there is no official solution for that, I’m going to write custom directive that will be applied on a dialog title and do all job for us: dialog.html … Read more

“Edit / Delete” button for each row & header column is ‘Action’ in the md-table component

by

You are on the right track, you just need to add an actions item to displayedColumns list: displayedColumns = [“username”, “email”, “userFirstName” … , “actions”]; and: <ng-container cdkColumnDef=”actions”> <md-header-cell > Actions </md-header-cell> <md-cell *cdkCellDef=”let row” > <button md-raised-button >Edit</button> </md-cell> </ng-container>

angular 8 material dialog close button with X top right

by

The easy way now is: <div mat-dialog-title class=”dialog-title”> <h2>Title</h2> <button mat-icon-button aria-label=”close dialog” mat-dialog-close> <mat-icon>close</mat-icon> </button> </div> And the dialog-title css is .dialog-title { display: flex; justify-content: space-between; align-items: center; } That’s working on Angular 8.0.0

No provider for MatSnackBar error when trying to run “ng test”

by

You should import the module instead of the component. import { MatSnackBar, MatSnackBarModule } from ‘@angular/material/snack-bar’; …. describe(‘BranchNameCellComponent’, () => { let component: BranchNameCellComponent; let fixture: ComponentFixture<BranchNameCellComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ BranchNameCellComponent ], imports: [ HttpClientTestingModule, ReactiveFormsModule, MatSnackBarModule ], schemas: [ NO_ERRORS_SCHEMA ] }).compileComponents(); })); it(‘should create’, () => { fixture = TestBed.createComponent(BranchNameCellComponent); … Read more

angular material 2 table header center alignment

by

Update for Angular Material 5.x.x, no need for ng-deep: mat-header-cell { display:flex; justify-content:flex-end; } DEMO md-header-cell get ‘translated’ to a container with class=”mat-sort-header-container”. Using that, you set its style with ng-deep. Use flexbox to center its content. Put the following in the components stylesheet: ::ng-deep .mat-sort-header-container { display:flex; justify-content:center; } DEMO

Template parse errors: ‘md-form-field’ is not a known element

by

UPDATE: Since 2.0.0-beta.12, md prefix has been removed in favor of mat prefix. See this CHANGELOG for details: All “md” prefixes have been removed. See the deprecation notice in the beta.11 notes for more information. After the update, <md-form-field> should be changed to <mat-form-field>. Also, MdFormFieldModule and MdInputModule should be changed to MatFormFieldModule and MatInputModule: … Read more