Gtjkyu

Angular and Material Multi-level Menu with Breadcrumb not working properly I am working with angular 6 and angular material 6. Here i am trying to create multilevel menu with breadcrumb. I have worked multilevel menu with properly but can not able to navigate menu with selected breadcrumb. When i click on the selected breadcrumb then the menu not getting organized appropriately. My demo link : stackblitz link here 1 Answer 1 @hi Monir tuhin You can try this Solution. I Have create a demo on Stackblitz. Component.ts breadCrumb(menu, index) { console.log('sub breadCrumb'); this.menuHeader.splice(index + 1, this.menuHeader.length - 1); if (menu[index] && menu[index].items && menu[index].items.length) { this.appitemsTravel = menu[index].items; } } Component.html <mat-toolbar color="primary" style="height: 45px; font-size: 16px; font-weight:...

Angular Material mat-select underline color change in Angular application I'm new to Angular Material, so I may be missing something, but I would appreciate any help on this case. My goal is to change the default blue underline of mat-select tag to white color while it is on focus. I managed to deal with this by adding this code to global styles file of my project: .mat-select-value, .mat-select-arrow{ color: #fff !important; } .mat-form-field-infix{ border-bottom: 2px solid lightgrey !important; } .mat-focused .mat-form-field-underline .mat-form-field-ripple{ background: none; } You can see how it looks here (language selection dropdown list in top left corner). After that I realized, that i will need some more mat-select tags in another components, but the underline this time should not be white, but black. Thats why I need my problem to be solved by changing component styles, but still nothing works for me. So far I tried to use !important to reset Angular Material ...

Could not find elementById on mat-card-content Having a canvas on the page is no problem to find it by id: <canvas id="chart" width="400" height="400"></canvas> document.getElementById("chart") everything fine. but if i wrap it in a mat-card i could not find it anymore: <mat-card> <mat-card-title>My title</mat-card-title> <mat-card-subtitle>My sub title</mat-card-subtitle> <mat-card-content> <canvas id="chart" width="400" height="400"></canvas> </mat-card-content> </mat-card> and this results with: document.getElementById("chart") null any idea why? any errors in console? can you please add a Minimal, Complete, and Verifiable example to your question? – ochi Jul 1 at 21:34 ...

Angular 5 material datatable I am trying to create search functionality using an Angular material data table. I am using the default function for filtering the datatable which is in the Angular documentation. What I am trying to do is, initially the table will not show any data, only after entering keywords in the search box, will the matched result be displayed. My problem is that my table is first giving results correctly but upon second attempt to search it keeps flickering. I have taken my data from a json file. Should I use a Promise for it? Or is it because I can't use the default filter function like this to achieve this search functionality? HTML: <div class="clear overflow-hidden"> <div class="input-holder"> <mat-form-field> <input matInput id="searchInput" placeholder=""> <div class="green-box"><img alt="search" (click)="searchTable();...