These are chat archives for angular/material

12th
Jul 2017
user2301
@user2301
Jul 12 2017 07:09
How to use exapnsion panel inside angular material card ?
are there any examples?
user2301
@user2301
Jul 12 2017 07:31
How to use exapnsion panel inside angular material card ?
are there any examples? Is that component available with these versions "@angular/core": "2.4.10" "@angular/material": "2.0.0-beta.2"?
Dennis Belany
@azarus
Jul 12 2017 07:41
@MythriManjunath expansion panel? o.O
oh its new
theres a demo app
maybe from this you can figure it out?
Is there a problem when you put it into an md-card-content ?
user2301
@user2301
Jul 12 2017 08:41
@azarus I tried to configure the same way as given in that demo but I get this error 'md-expansion-panel' is not a known element:
@azarus Is there an implementation of expansion panel in the "@angular/material": "2.0.0-beta.2"?
 <div fxLayout="row" fxLayoutWrap  style="padding-bottom: 15px; 
padding-top: 15px; margin:auto; justify-content: center;background-color:paleturquoise;" >  
  <md-card fxFlex.gt-md="30" fxFlex.md="30"  fxFlex.sm="auto" fxFlex.xs="100" *ngFor="let data of myData" style="margin:10px;">
  <md-card-content >  
    <h1>Name: {{data.name}} </h1> 
  <h3 [ngStyle]="{'margin-top': '-3px','margin-bottom': '20px'}">{{data.time | date:'HH:mm:ss, MMMM dd'}}</h3>
  <h2>content1: {{data.somedata1 }}</h2>
  <h2>content2: {{data.somedata2}}</h2>
  <h2>content3: {{data.somedata2}}</h2>
  <h2>content4: {{data.somedata3}}</h2>
  <h3>
    <a routerLink="">some link here</a> 
    </h3>
    // Add expansion panel or collapsable UI component here
  </md-card-content>
  </md-card> 
</div>
user2301
@user2301
Jul 12 2017 09:49
@azarus I guess that demo uses angular 4..I cant use with my angular 2 application
Luke Skelhorn
@SCRATK
Jul 12 2017 10:10
If I'm using material and i have my form using ngModel and i try and add a [formControl]="emailFormControl" it throws up the error of Uncaught Error: Template parse errors: There is no directive with "exportAs" set to "ngModel"
But It works fine with out the formControl
Luke Skelhorn
@SCRATK
Jul 12 2017 12:03
I figured it our and fixed my problem i was having
masber
@masber_twitter
Jul 12 2017 12:12
hi, I am trying to use material, I just did a input box but it is giving me an error. I was wondering whether someone could help me? https://pastebin.com/raw/7ic9tvhn
Dennis Belany
@azarus
Jul 12 2017 12:34
@MythriManjunath upgrade to angular 4 then :D
@MythriManjunath Did you import the expansion panel module or component i your app module at all
pantonis
@pantonis
Jul 12 2017 12:50
Hi, If I increase height property of the input using css I get this
capture.png
pantonis
@pantonis
Jul 12 2017 12:55
anyone knows how to increase height of the input without affecting the palceholder text position?
Luke Skelhorn
@SCRATK
Jul 12 2017 13:11
@masber_twitter for a input feild in a form you want it to look like this <input mdInput placeholder="First Name" [formControl]="NewFaithLeader.controls['first_name']" name="first_name" type="text" required>
masber
@masber_twitter
Jul 12 2017 13:19
@SCRATK thanks, also do you know why I am getting this error? zone.js:939 GET http://localhost:3000/@angular/cdk 404 (Not Found) I don't know why angular can't find cdk as I can see it in the "node_modules\@angular\cdk"
pantonis
@pantonis
Jul 12 2017 13:19
anyone knows?
masber
@masber_twitter
Jul 12 2017 13:26
these are my package.json and app.module.ts https://pastebin.com/raw/z74izz4H
user2301
@user2301
Jul 12 2017 13:49
@azarus I imported the component. But due to version issues, I cant use that. I cant upgrade to angular 4 because there are other dependencies and it will break the application. I found ng2-expansion-panels suitable for angular 2 application. https://github.com/Gbuomprisco/ng2-expansion-panels
@azarus Thanks for the suggestions
Neverminder
@Neverminder
Jul 12 2017 15:17
Hi. Anybody knows how to get index of a row on md-table? For instance in this example: <md-cell *cdkCellDef="let row"></md-cell>
Dennis Belany
@azarus
Jul 12 2017 15:24
@MythriManjunath hope fully one day there will be no more relative path night mare in angular 2 and no more version issues and materia2 will catch up to the first version regarding the number of features :x:
Hopefully :)
JonathanAaron
@JonathanAaron
Jul 12 2017 17:01
I need help making a clickable card. Is there an attribute for this I'm not aware of or so I have to implement some fancy javascript to make it happen?
Luke Skelhorn
@SCRATK
Jul 12 2017 17:49
@JonathanAaron You could add a class to the <md-card class="clickable" (click)="function()>...</md-card>and then in your CSS for the .clickable class add cursor: pointer;
JonathanAaron
@JonathanAaron
Jul 12 2017 17:59
That's @SCRATK
masber
@masber_twitter
Jul 12 2017 23:35
hi, I am new to Angular. I would like to understand why my form does not accept my formGroup? http://plnkr.co/edit/bwWIoTpUetvyguxMOUMS?p=preview