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 2019 18:50
    @StephenFluin banned @piotr-mamenas
SAGO
@SAGOlab
ok, but list selection in typescript what is? something like listSelection: any
?
SAGO
@SAGOlab
@iamsank8 thanks a lot sir
Sanket Thotange
@iamsank8
Welcome
BuZZ-dEE
@buzz-dee:matrix.org
[m]
hello, i saw there is a new release which should fix angular/components#17923 and i think also this one angular/components#18695 , but it seems for me, that it is not really fixed, because scolling an dragging is not really well working. Also this had already worked well in chrome, but it is also broken in chrome now
kannan Ganesan
@kannangan
hii team,
I want to implement A chip input is a form control that can be used to select and remove multiple items from a list using control value accesor.(herefore it must implement the ControlValueAccessor).. can some one tell me how to do this.. or provide me with a link of example code
Like stackblitz
redoc-n
@redoc123
Can't bind to 'ngIf' since it isn't a known property of 'form'. --- can anyone assist with this?
SAGO
@SAGOlab
Hi there there is a way to have MatAutocompletePanel always visible
?
kelly
@kellyprankin
Anyone know a cleaner way to do Angular Material Tables without leaking the DataSource into a component? I'd rather just inject a service and async pipe subscribe
While still being able to do pagination etc
1 reply
Kamil
@kamilnosek
Hi everyone,
Anyone know what is the reason why this code is not working? https://stackblitz.com/edit/angular-itg3nh?file=src/main.ts
I want to create a projection into material table with rows. This sample is based on that: https://stackblitz.com/edit/angular-3dlbca?file=src/app/components/dyn-table/dyn-column.component.ts - but im not sure why it's not working (probably angular version (?) )
Abdul Basit Khan
@meanstackBasit
@danww sorry I am late
here is my example https://stackblitz.com/angular/aygyvlbyxpk?file=src%2Fapp%2Fchips-autocomplete-example.ts actually I am using mat Chips in Reactive form every thing work fine for me!
the issue is that how to retrieve mat chips just like that as in this example WHEN UPDATING FORM VALUE AGAIN IN FORM
I am only getting value of mat chips in my input field....
Gianlucca Claudino
@Gianluska
Hello guys, is there some way to have a Custom Angular Material? I mean, my own Angular Library using Material as a basis.
Daniel Willis
@danww
@meanstackBasit For your filter, you'll need to get the exisiting chip values from the MatChipList. The input only holds the text value as you type for the autocomplete.
SAGO
@SAGOlab
Hi there, is possible to extend MatInput for custom inpunt type like file for example?
SAGO
@SAGOlab

For now I'm using:

<label for="fileUploader" style="color:darkslategrey">{{ field.label }}</label>
<input id="fileUploader" class="file-input" type="file" hidden formControlName="test1">

but I need to put it out of mat-form-field, so I'm wondering if I can extend MatInput to put input type file inside mat-form-field

SAGO
@SAGOlab
no one?
Pavan K Jadda
@pavankjadda
All, I have an issue with Mat Date Picker
Daniel Willis
@danww
@pavankjadda Are you applying any CSS that might globally target table cells, e.g., extra padding/margin?
Michele Santoro
@michelu89
Hello, I have recently been trying to implement mat-chips with template-driven forms. Is this possible?
1 reply
Sanket Thotange
@iamsank8
I am trying to wrap my head around this idea. I open a dialog from a page and from that dialog, I open another dialog. Now if I cancel the current dialog, how can I go back to first dialog that I opened?
Yaakov Chaikin
@ychaikin
If I add another FormControl to a FormGroup, but that control is already in an invalid state the control shows up on the form, but the mat-error is not showing up (even though the control does indeed have error: { required: true } and its status: invalid. Any ideas on how to force it to show the mat-error upfront, i.e., without requiring the user to interact with the control first?
kent7301
@kent7301
Hello
tuckerjt07
@tuckerjt07
I am attempting to use Angular Material components inside of a web component. Everything is working except for one edge case with the cdk-overlays. So far I have had success using an override of _createContainer() to append the overlay container to a div inside of the shadowroot so that the styles will apply. However if I hide the parent element with an *ngIf and then toggle it back the overlay container is present in the DOM but it and its contained elements are not visible.
Is there something I'm missing where I need to manually clear or toggle something to get that behavior to work correctly?
tuckerjt07
@tuckerjt07
It seems to be an issue with the overlay being inside of an ngIf that is toggled. Once it's toggled to the hidden state the content will not load in the container even though it is present.
dhruv217
@dhruv217
Hello everyone,
dhruv217
@dhruv217
I have a general question to ask about @angular/google-maps regarding pricing per load.
Does each instance of a <google-map> component count as a map load..?
For example if I have multiple routes in my application that each create an instance of <google-map> component,
and the Maps JS Api is loaded in the root index.html <head>, routing to each route counts as a new map load or
is it counted once per application visit and further routing on to different components does not incur any further charge..?
Amir Ali Shokri
@AmirHCS_gitlab

Hi Every One How Can I Auto Refresh In Angular Material
In BootStrap Tables Is Auto Refresh But Angular ...
I Have 2 Component one Input And One Table And If Add New Item From Input Table Refrsh

Tahnks

Amir Ali Shokri
@AmirHCS_gitlab
??
Travis Rivera
@ResourceHog
hey is this active?
SAGO
@SAGOlab

@AmirHCS_gitlab you can use subscribe an observable like this:

ngOnInit() {
    this.refreshData();
    this.interval = setInterval(() => { 
        this.refreshData(); 
    }, 5000);
}

refreshData(){
    this.myService.getData()
        .subscribe(data => {
            this.data = data;
        })
    );
}

so every 5 seconds the data will refresh for you...

Amir Ali Shokri
@AmirHCS_gitlab
Thanks That is Help Full
Daniel Willis
@danww
@AmirHCS_gitlab I don't think you want to be always polling to refresh like that. Your table should subscribe an Observable data source that is updated by the input component. That way the table will only refresh as required.
Amir Ali Shokri
@AmirHCS_gitlab
@danww Thanks But How?
Pavan K Jadda
@pavankjadda

@pavankjadda Are you applying any CSS that might globally target table cells, e.g., extra padding/margin?

Sorry. Just now seeing your reply. I am able to fox the issue. See the answer here https://stackoverflow.com/questions/66049716/mat-date-picker-overflows-when-opened

Daniel Willis
@danww
@AmirHCS_gitlab Here's a very simple example of one way to do it: https://stackblitz.com/edit/angular-ivy-ggvode?file=src%2Fapp%2Fapp.component.ts
@AmirHCS_gitlab Note that all the table component does is subscribe to the BehaviorSubject of the data, passed from the parent component. The input component simply emits a new item. The parent component listens for new items from the input component and adds them to the BehaviorSubject.
kelly
@kellyprankin

Anyone know how to get this to submit my form?

      <mat-date-range-picker #projectDatePicker>
        <mat-date-range-picker-actions>
          <button mat-raised-button type="button" matDateRangePickerCancel>Cancel</button>
          <button mat-raised-button type="submit" color="primary" matDateRangePickerApply>Apply</button>
        </mat-date-range-picker-actions>
      </mat-date-range-picker>

it doesn't trigger the form's submission:

  <form [formGroup]="projectSearchForm" (ngSubmit)="onSubmit()">

If I put the button outside of the mat-date-range-picker-actions then it does

kelly
@kellyprankin
I ended up just not using the ngSubmit method since I only have one field here anyways
Amir Ali Shokri
@AmirHCS_gitlab
Thanks This Is Great Fix
shivam kumar
@Shiva7071007

Hi,
I recently migrated to a angular 10 from angular 7 and placeholder for my input doesn't show up anymore. After inspecting, placeholder attribute is converted to data-placeholder. If i change it to browser to placeholder, it shows up.

sample image : https://ibb.co/mTnf4jf

<input matInput class="mat-select-search-input" [formControl]="searchedValue" (input)="onInputChange($event.target.value)"  (keydown)="handleKeydown($event)"
                          autocomplete="off" placeholder="Search" />
SV9045
@SV9045
Does any one know, How to change image based on the selection from drop down in Angular Material ?
Daniel Willis
@danww
@SV9045 Yes. Share wth us a Stackblitz of your code so far, and I can help you.
vinay kumar
@vinaymcscet

Hello, I have below code of Mat-select with virtual-scroll.
I have get the value of mat-select in formBuilder but did not reflect the value which I select in the mat-item-select.

<mat-form-field appearance="outline">
<mat-select multiple (openedChange)="openChange($event)" formControlName="itemSelect">
<mat-select-trigger>
{{ itemTrigger }}
</mat-select-trigger>
<cdk-virtual-scroll-viewport itemSize="5" minBufferPx="200" maxBufferPx="400" class="example-viewport-select">
<mat-option *cdkVirtualFor="let list of skillSet" [value]="list.data" (onSelectionChange)="onSelectionChange($event)">
{{list.data}}
</mat-option>
</cdk-virtual-scroll-viewport>
</mat-select>
<mat-error *ngIf="!addCompany.controls['itemSelect'].valid && addCompany.controls['itemSelect'].touched">
{{ titleAlert }}
</mat-error>
</mat-form-field>