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
Brad
@bradtaniguchi
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
Daniel Willis
@danww
Welcome @RecursiveRich
Rich Berberian
@RecursiveRich
Thanks @danww
Daniel Willis
@danww
@RecursiveRich I got it to work, starting from the Angular Material example here: https://stackblitz.com/angular/ngmakqnqjmq?file=app%2Fbutton-toggle-exclusive-example.ts
I can't figure out how to save and share my work, but essentially the problem appears to be with the two-way data-binding.
What I did was remove the [(ngModel)] from the button group, do the data binding in the component(rather than the template) and leave the state of the button UI to the Material component. reset() is then simply this.buttonGroup.value = '';
It's a bit more work, but it's cleaner than accessing private properties, etc.
Daniel Willis
@danww
I rarely, if ever, use two-way data-binding, but rather have data flow directly from state, and have actions modify state, so haven't run into this one before.
Rich Berberian
@RecursiveRich
Thanks @danww !
Daniel Willis
@danww
@RecursiveRich Did you get it working?
Rich Berberian
@RecursiveRich
@danww Sure did!
Daniel Willis
@danww
@RecursiveRich Splendid!
Shervin Z
@shervinee
@fabianngala The initial steps in achieving your goal would be checking angular material guide: https://material.angular.io/guide/theming for custom theming, customizing your own theme.scss file with the designs, mixins and etc...Just be aware that custom theming if, beyond colors, fonts, and some simple sass can get a bit tricky.
I suggest using this tool in case you found your own theme.scss a bit overwhelming:
https://materialtheme.arcsine.dev
S E R A Y A
@takahser
hey guys
what's the reccommended approach to extend a angular material component?
in my case, I want the slider component to have two differently colored segments (e.g. 0-40% primary color, 40-100% accent color)
I got started by building a wrapper but I failed to achieve this requirement by simply overriding styles
Instead, I'll need to add some additional html markup
S E R A Y A
@takahser
thanks I read that, but I'm not theming a custom component, but extending a material component instead :)
Manoj
@manojvignesh
Oh ok
you can override the styles.
was there any issue with that??
S E R A Y A
@takahser
what's the reccommended approach on overriding the styles?
I guess setting the view encapsulation to none and providing more specific styles, right?
in my case if I would add custom markup, it works
otherwise, it doesn't
and I didn't find a way to "inject" the markup
I also tried pseudo elements, but it didn't work for some reason :(
fabian
@fabianngala
T http://localhost:4200/js/materialize.min.js net::ERR_ABORTED 404 (Not Found) i get this eror in my browser
Manoj
@manojvignesh
@takahser Try ::ng-deep
S E R A Y A
@takahser
that's neat @manojvignesh thanks
but still, I need to add some custom markup