angular/material

AngularJS Material: Material Design component library for AngularJS (1.x). Use angular/material2 channel for Angular Material (v2+).

mindruion

@mindruion

ERROR in : Directive MatFormFieldControl in /var/www/frontend/node_modules/@angular/material/form-field/index.d.ts has no selector, please add it!

Does anyone know from where this comes?

Cody Mikol

@codymikol

See my last message

ZBAGI

@ZBAGI

Hi, looks like i have problem with stylig popups - here is how initiate style:

.clubhub-user-panel {
    @include angular-material-theme($my-theme);
    @include app-theme($my-theme);
}

And the problem is clubhub-user-panel is a css class in the app-component

<div class="clubhub-user-panel">
    <mat-progress-bar mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>
    <router-outlet></router-outlet> // Everything is here
</div>

So when popup shows up is outside of the clubhub-user-panel class thus style is not applied.

How can i fix it ?

I found something like this:
angular/components@cbd42f0

ZBAGI

@ZBAGI

But @angular/material does not have OverlayContainer export anymore

so how do i do it now ?

ZBAGI

@ZBAGI

Hey, how do i pass ng-container inside ng-content ?? I want to make this work:

<app-list>
    <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> ID</th>
        <td mat-cell *matCellDef="let account"> {{account.id}} </td>
    </ng-container>
</app-list>

And then app-list template:

<table mat-table [dataSource]="paginator" *ngIf="paginator">
    <ng-content> </ng-content>

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

But looks like mat-table cannot see containers defined in parent

Vidhi Khanna

@vidhikhanna

Issue with indeterminate state of select all check box when combined with filtering. Hey, I am using mat-table to show my collection in a grid form in my project. I am using both filtering and multi selection as per documentation given on https://material.angular.io/components/table/overview. The issue is when I put a text filter that results in fewer rows in my table and do select all from top most check box to select just those fewer rows (excluding those that are not part of filter), and when I uncheck those filtered rows one by one, my top most check box goes in checked state although no row is selected. I have added a video recording of the issue to explain it better. Also the stackblitz link is: https://stackblitz.com/angular/vkgnqdjedoyg?file=src%2Fapp%2Ftable-selection-example.html

SelectAllAndFiltering.mkv

Mile Mijatović

@mijatovicmile

Hello, can you help me with Angular material table ?

<table mat-table [dataSource]="offers" class="mat-elevation-z8">
    <!-- ID Column -->
    <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> ID </th>
        <td mat-cell *matCellDef="let element"> {{ element | json }} </td>
    </ng-container>


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

when I try element | json

I get this response

but when I change to element.id , table is empty

in service I have this code

    getOffers(): Observable<Offer[]> {
        return this.http.get(OFFERS_API)
            .pipe(map(fetchedOffers => { 
                // Transform Object to an Array so later we can loop throug that Array
                return Object.values(fetchedOffers) 
            })
        )
    }

in component this code

    ngOnInit() {
        this.customersService.getOffers()            
        // Subscribe to transformed Data
        .subscribe(transformedData => {
            this.offers = transformedData;
            console.log('Offers from component', this.offers);
        }, error => {
            console.log('Error occured', error);
        })
    }

any suggestion please ?

what is wrong with my code , anyone knows _

HaSanAlkholy

@HaSanAlkholy

anyone here

Yann-Thomas LE MOIGNE

@yatho

Hello @HaSanAlkholy, when you say "when I change to element.id":
You have made this change ?

<table mat-table [dataSource]="offers" class="mat-elevation-z8">
    <!-- ID Column -->
    <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> ID </th>
        <td mat-cell *matCellDef="let element"> {{ element.id }} </td>
    </ng-container>


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

Alex

@alexcarrasco93

hello

i'm using angular material datepicker and everytime i write in an input an invalid date automatically change the value for a vaid value. For example i write "18/02/1993aaaaa" and when i blur the input it changes to "18/02/1993"

i want to get the event when the input value is already changed

i tried (dateInput) and (dateChange) EventsEmitters to catch it but the catch the invalid value "18/02/1993aaaaa"

Yann-Thomas LE MOIGNE

@yatho

@alexcarrasco93 , could you provide an example of your code, I have used this feature on my project, and if I have not a date as input, the field was not a valid value

Michael Prentice

@Splaktar

@alexcarrasco93 @yatho @mijatovicmile @vidhikhanna @ZBAGI This channel is for AngularJS Material. Please use the https://gitter.im/angular/material2 channel for Angular (v2+) Material and CDK.

@HaSanAlkholy hello there :smile: :wave:

Michael Prentice

@Splaktar

I am organizing a Hangouts Meet call with contributors to AngularJS Material on March 4th at 6pm EST (based on the Doodle that I sent out to active contributors).

This meeting is an opportunity, for contributors to AngularJS Material, to ask questions, discuss ideas, and make plans for future contributions. It's also an opportunity to help coordinate contributions and get updates on release milestones and project updates.

If you would like to get an invite, please email me at michael.prentice@devintent.com.

*Please note that we will not be discussing Angular Material (v3+), Angular CDK, Google Maps, or YouTube Player.

Chandrakanth Reddy

@CHANDRAKANTHREDDY93

Hi, how to run .sh file from Angular app. Please help

Michael Prentice

@Splaktar

@CHANDRAKANTHREDDY93 Can you be more specific? Are you talking about a specific .sh file in the AngularJS Material repository?

narendratech

@narendratech

Hi Guys,

any suggestions, i am facing content projection issue with material menu

Michael Prentice

@Splaktar

@narendratech hello. There isn’t enough information there to know where to start helping you.

narendratech

@narendratech

@Splaktar: I have create one component with mat menu, and i am passing sub menu items using ng-content but sub menu items mouse over is not showing menu items

@Splaktar : nested-menu-example component htmlis below

<button mat-button [matMenuTriggerFor]="animals">Animal index</button>

<mat-menu #animals="matMenu">
<button mat-menu-item >Test</button>
<button mat-menu-item>Test2</button>
<ng-content> </ng-content>
</mat-menu>

<nested-menu-example>
<button mat-menu-item [matMenuTriggerFor]="vertebrates">Vertebrates</button>
<button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
<mat-menu #vertebrates="matMenu">
<button mat-menu-item >Fishes</button>
<button mat-menu-item >Amphibians</button>
<button mat-menu-item >Reptiles</button>
<button mat-menu-item>Birds</button>
<button mat-menu-item>Mammals</button>
</mat-menu>

<mat-menu #invertebrates="matMenu">
<button mat-menu-item>Insects</button>
<button mat-menu-item>Molluscs</button>
<button mat-menu-item>Crustaceans</button>
<button mat-menu-item>Corals</button>
<button mat-menu-item>Arachnids</button>
<button mat-menu-item>Velvet worms</button>
<button mat-menu-item>Horseshoe crabs</button>
</mat-menu>
</nested-menu-example>

Michael Prentice

@Splaktar

@narendratech This channel is for AngularJS Material. Please use the https://gitter.im/angular/material2 channel for Angular (v2+) Material and CDK.

Joe

@foxjazz

drag drop question. I have 2 lists, but when one is empty there is no space to dragTo. Is there a common pattern for this situation?

Michael Prentice

@Splaktar

@foxjazz This channel is for AngularJS Material. Please use the https://gitter.im/angular/material2 channel for Angular (v2+) Material and CDK.

Joe

@foxjazz

you really shoudl fix that

(angularjs)/material pitty the fool

Michael Prentice

@Splaktar

@foxjazz It’s based on GitHub organization and repo. There is no AngularJS organization on GitHub. We posted a descriptive title at the top of the channel and a channel description to clarify this.

Rini30

@Rini30

i am using drag and drop material ui for dragging an image all around.But i am facining an issue on how to drag and drop in into a next container?.I have defined a div tag and linked it.But still unable to drop the image.

Any help

here is the code

Where communities thrive

People

Repo info

Activity