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
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
i want to use custon theme usingsas and mixin to style each and every component
Suren Konathala
Daniel Willis
@ksurendra Yes, they're on that page. See 'Basil', 'Crane', 'Fortnightly', etc.
Suren Konathala
i meant code @danww
Daniel Willis
Oh right - sorry!
Suren Konathala
no worries.. i should have been clear :)
Daniel Willis
If you mean are they available as themes for Angular Material, then I don't think so; I've not come across them before.
Suren Konathala
or even just HTML/CSS.. they're great resource.. if we can access the code/way it is built, it'll be a great references
Daniel Willis
Given that Angular Material is not super-flexible when it comes to theming, I imagine it would be quite a bit of work to replicate them.
I think they're given more as a framework-agnostic guideline of how to implement your own brand while conforming to Material Design principles.
I do wish Angular Material was a little easier to tweak beyond just fonts and a few colours.
Suren Konathala
yeah.. that's always tricky