Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jun 18 18:50
    @StephenFluin banned @piotr-mamenas
Jack
@jackmercy
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)
image.png
Alessio Stalla
@alessiostalla
@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
@lucianoredondo.ayjsistemas_gitlab
Hi, anybody working on css grid here to help me out?
Sebastián Rojas
@sebastian-rojas_gitlab
Hi
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
@gopalsingh

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

what kind of help you need ?

Alessio Stalla
@alessiostalla
@sebastian-rojas_gitlab +1
ovdmeer
@ovdmeer
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
@zzj0402_gitlab
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?
Brad
@bradtaniguchi
@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
@zzj0402_gitlab
@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.
Brad
@bradtaniguchi
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
@zzj0402_gitlab
Interfaces are real : )
As real as the strings we see now.
Brad
@bradtaniguchi
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
@zzj0402_gitlab

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> -->
      </ng-container>

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

Here is the component ts:

import { Component, OnInit } from "@angular/core";
import { GetService } from "./get.service";
import { global } from "../global";
@Component({
  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);
    global.tasks.push(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);
      this.splitReport();
    });
  }
  private splitReport() {
    if (this.report) {
      let splitReport = this.report.split(/\r?\n/);
      this.displayedColumns = splitReport[0].split(",");
      console.log(this.displayedColumns)
      let outputRows = [];
      for (let outputIndex = 1; outputIndex < splitReport.length; outputIndex++) {
        let outputRow = splitReport[outputIndex];
        // console.log(outputRow);
        if (outputRow == "") {
          break;
        }
        let outputRowData = outputRow.split(",");
        console.log(outputRowData);
        outputRows.push(outputRowData);
      }
      this.outputRows = outputRows;
      console.log(this.outputRows);
    }
  }
}
Issue is : > zzj0402/moaweb#33
Brad
@bradtaniguchi

@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
@zzj0402_gitlab
@bradtaniguchi It works fine. Turns out the database has faulty update. But thanks. I don't understand what you are trying to say.
Dileep-raja
@Dileep-raja
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) {
this.dataSource.paginator.firstPage();
}
}

Any help how to write unit test for this function?

fabian
@fabianngala
hi b
i want to use custon theme usingsas and mixin to style each and every component
Suren Konathala
@ksurendra
Daniel Willis
@danww
@ksurendra Yes, they're on that page. See 'Basil', 'Crane', 'Fortnightly', etc.
Suren Konathala
@ksurendra
i meant code @danww
Daniel Willis
@danww
Oh right - sorry!
Suren Konathala
@ksurendra
no worries.. i should have been clear :)
Daniel Willis
@danww
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
@ksurendra
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
@danww
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.
Unfortunately.
I do wish Angular Material was a little easier to tweak beyond just fonts and a few colours.
Suren Konathala
@ksurendra
yeah.. that's always tricky
robertbrower-technologies
@robertbrower-technologies
Why am I having difficulty getting ViewChild to work with a element inside mat-sidenav and mat-sidenav-content?
Rich Berberian
@RecursiveRich
Hi everyone. This is my first time using Gitter. Looks like there is just one stream of comments and questions? My question is about reseting button toggles so that none are selected. As far as I can tell, there is no API for this. I have to use a private property like this: this.buttonGroup._buttonToggles.map( btn => btn.checked = false ); My questions is the same as https://stackoverflow.com/questions/52600220/angular-material-reset-button-toggle-group which has example https://stackblitz.com/edit/angular-wgsubv