Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Jun 18 18:50
    @StephenFluin banned @piotr-mamenas
Shekhar Ramola
what should be the correct logic to close matmenu trigger on mouseleave?
Shekhar Ramola
this trick works, however if I open mat menu and then do not go inside it, then it will be open forever
  <mat-menu #menu="matMenu">
                <span (mouseleave)="closeMenu()">
                    style="outline: none"
                    style="outline: none"
                    My Profile
Alessio Stalla
@bradtaniguchi nevermind: I had already solved it in angular.json and forgotten about it :D
Do any of you people know some decent Material admin theme/template? Ideally that it can be redistributed as part of a product (it doesn't matter if it's under a commercial license, good work deserves to be paid). Something like http://akveo.com/ngx-admin/pages/dashboard but for Material, not Bootstrap. I can't find any :(
Lisa Copeland
@alessiostalla ooh I like the spinner
Alessio Stalla
@sliceofbytes that looks super cool, thanks!
Jeff Voss
@lithqube what is your problem
Dominic Watson
anyone made a dayjs adapter for Material datepicker?
Uday Vunnam

Hi All, I felt the need for breadcrumbs component in Angular that is simple to start with, declarative and dynamic. I have published https://github.com/udayvunnam/xng-breadcrumb. Since routes can be defined in a variety of ways, please let me know your feedback if you want to mention any missing use case for a breadcrumb.

The demo app for this library - https://xng-breadcrumb.netlify.com/

hi material team
I have a problem with multiple line of mat-error
Some how mat form field set mat-error with the position is absolute
let say I have a 2 3 line of error text
this will render on top of other input (like the image)
Do we have solution for this or work around solution?
because we could have 1 line of error text in English but for other language it could be 2 or 3 line of text
mat form field sets position absolute element inside of it (include mat-error)
Alessio Stalla
@udayvunnam thanks for the announcement!
It's great to see community projects flourish.
We already have our breadcrumbs solution, but I may take some inspiration :)
Luciano Redondo
Hi, anybody working on css grid here to help me out?
Sebastián Rojas
some know how to make an angular library with styles that can reuse apps that use the library, something like angular material dows
Gopal Singh

Hi, anybody working on css grid here to help me out?

what kind of help you need ?

Alessio Stalla
@sebastian-rojas_gitlab +1
Hi there, I noticed some unexpected behavior when I put the Datatable with expanding rows (from the examples) in a tab.
When I switch to another tab en switch back, all the rows are expanded
I don't understand why this happens
Zijing Zhang
My data source is a list of string list instead of a list of interfaces. How do I assign the data column number? Or construct interfaces dynamically?
@zzj0402_gitlab Sounds like you have an array of strings, instead of an array of objects, and are trying to use the data-source approach with the cdk/material table. The table works best with an array of objects, as such you should change all the values in the array into an object with 1 property with the value of the string value. You can use something like .map somewhere between the data and passing it in the data source .connect method
Zijing Zhang
@bradtaniguchi I do have array of strings due to machine learning tasks have dynamic attributes. Unfortunately, unless there is a good way to define interfaces on the fly, I cannot use the recommended object approach.
@bradtaniguchi I get them to work but having an odd side effect where the data row variable "remebers" its old values unless I restart the whole app.
I can't provide any advice for yoursetup, but you should be able to change the data before it reaches the table right? Interfaces are a typescript concept and aren't "real", as the code runs as JS.
unless I'm confused :)
Zijing Zhang
Interfaces are real : )
As real as the strings we see now.
Maybe I am confused, the interface files/types are real to TS, but they aren't "real" in that they exist until build time, at which point TS is just JS, as such interfaces don't exist, but the data they represent does.
going back to the original issue though, how do you have the data source setup with the list of strings right now?
Zijing Zhang

I am not with you on that page of reality. To me, as long as it's practically use while in coding, it is real. Otherwise all high-level languages are essentially illusions since they all compile down to CPU/GPU instructions. Hence, it makes more sense to have the reality defined as being used/practiced.
Anyway, here is the template:

   <table [dataSource]="outputRows" mat-table class="mat-elevation-z8">
      <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns;let i = index" [attr.data-index]="i">
        <th mat-header-cell *matHeaderCellDef> {{column}} </th>
        <td mat-cell *matCellDef="let outputRow">{{outputRow[i]}}</td>
        <!-- <td mat-cell *matCellDef="let element"> {{element[column]}} </td> -->

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let outputRows; columns: displayedColumns;"></tr>

Here is the component ts:

import { Component, OnInit } from "@angular/core";
import { GetService } from "./get.service";
import { global } from "../global";
  selector: "app-report",
  templateUrl: "./report.component.html",
  styleUrls: ["./report.component.css"]
export class ReportComponent implements OnInit {
  message: string = "Please submit MOA taskID!";
  taskID: string = null;
  report: string = null;
  status: string = null;
  timestamp: string = null;
  command: string = null;
  displayedColumns: string[] = null;
  outputRows: string[][] = null;
  constructor(private getService: GetService) { }
  ngOnInit() { }
  getReport(taskID: string) {
    if (!taskID) {
      console.error("No task ID!");
    this.message = "Fetching task...";
    // console.log(taskID);
    this.getService.getReport(taskID).subscribe(msg => {
      this.message = msg;
      this.status = this.getService.status;
      this.report = this.getService.report;
      this.timestamp = this.getService.timestamp;
      this.command = this.getService.command;
      this.taskID = taskID;
      // console.log(this.status);
      // console.log(this.report);
  private splitReport() {
    if (this.report) {
      let splitReport = this.report.split(/\r?\n/);
      this.displayedColumns = splitReport[0].split(",");
      let outputRows = [];
      for (let outputIndex = 1; outputIndex < splitReport.length; outputIndex++) {
        let outputRow = splitReport[outputIndex];
        // console.log(outputRow);
        if (outputRow == "") {
        let outputRowData = outputRow.split(",");
      this.outputRows = outputRows;
Issue is : > zzj0402/moaweb#33

@zzj0402_gitlab You could go down that rabbit hole, but I'm pointing to using the term "define interfaces on the fly" isn't correct. You can't abstract data into interfaces on the fly using typescript, as the abstraction from TS to JS prevents any interfaces from being "created". Its very possible the term "interface" means something different to you.

I assume your splitReport method, which updates the this.outputRows attribute can be modified so your outputRows is an array of objects, which should allow you to use the data-source class. But its hard to tell where the data-source would be used or is being used in this code.

Zijing Zhang
@bradtaniguchi It works fine. Turns out the database has faulty update. But thanks. I don't understand what you are trying to say.
hi everyone any help on writeing test case for below function searchFilter

applyFilter(filterValue: string) {
console.log("filter data"+filterValue)
this.dataSource.filter = filterValue.trim().toLocaleLowerCase();
if (this.paginator) {

Any help how to write unit test for this function?

hi b