0

I am attempting to implement a select drop-down from the example given in the Material 2 Demo app and I am getting the following error. Any assistance would be awesome.

enter image description here

Component:

import { Component } from '@angular/core';
import { NgForm, FormControl } from '@angular/forms';

import { Tenant } from '../../shared/models/tenant.model';

import { InviteTenantHttp } from './invite-tenant-http.service';

@Component({
  selector: 'invite-tenant',
  templateUrl: './invite-tenant.component.html',
  styleUrls: ['./invite-tenant.component.scss']
})

export class InviteTenantComponent {
  model = new Tenant('', null, '');

  constructor(
    private inviteTenantHttp: InviteTenantHttp
  ) {}

  tenantGroups = [
    { value: 'group1', viewValue: 'group-1' },
    { value: 'group2', viewValue: 'group-2' },
    { value: 'group3', viewValue: 'group-3' }
  ];

  submit(form: NgForm) {
    this.inviteTenantHttp.post(this.model)
      .subscribe(
        data => {
          console.log(data);
        },
        error => console.log(error)
      );
  }
}

Component Template:

<div class="invite-tenant-container">
  <header class="invite-tenant-header">
    <div class="invite-tenant-site-info"></div>
    <div class="invite-tenant-cyber-score"></div>
  </header>
  <section class="invite-tenant-content">
    <h3>Invite Tenant to //Site Name\\</h3>
    <form #form="ngForm" (submit)="submit(form)" novalidate>
            <md-input
                type="email"
                name="email"
                [(ngModel)]="model.username"
                placeholder="Email"
                required>
            </md-input>
            <md-input
                type="password"
                name="password"
                [(ngModel)]="model.password"
                placeholder="Password"
                required>
            </md-input>
            <md-select
                placeholder="Tenant Group"
                [(ngModel)]="model.tenantGroup"
                #tenantControl="ngModel">
                <md-option *ngFor="let group of tenantGroups" [value]="group.value">
                    {{ group.viewValue }}
                </md-option>
            </md-select>
            <button type="submit">submit</button>
        </form>
  </section>
</div>

Model:

export class Tenant {
  constructor(
    public username: string,
    public password: number,
    public tenantGroup: string
  ) {}
}

Below is the component and template from the demo app implementation:

Component:

  <md-card>
    <md-select placeholder="Drink" [(ngModel)]="currentDrink" [required]="isRequired" [disabled]="isDisabled"
      #drinkControl="ngModel">
      <md-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
        {{ drink.viewValue }}
      </md-option>
    </md-select>
    <p> Value: {{ currentDrink }} </p>
    <p> Touched: {{ drinkControl.touched }} </p>
    <p> Dirty: {{ drinkControl.dirty }} </p>
    <p> Status: {{ drinkControl.control?.status }} </p>
    <button md-button (click)="currentDrink='sprite-1'">SET VALUE</button>
    <button md-button (click)="isRequired=!isRequired">TOGGLE REQUIRED</button>
    <button md-button (click)="isDisabled=!isDisabled">TOGGLE DISABLED</button>
  </md-card>

</div>

Component:

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';

@Component({
    moduleId: module.id,
    selector: 'select-demo',
    templateUrl: 'select-demo.html',
    styleUrls: ['select-demo.css'],
})
export class SelectDemo {
  isRequired = false;
  isDisabled = false;
  currentDrink: string;
  foodControl = new FormControl('');

  foods = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];

  drinks = [
    {value: 'coke-0', viewValue: 'Coke'},
    {value: 'sprite-1', viewValue: 'Sprite', disabled: true},
    {value: 'water-2', viewValue: 'Water'}
  ];

  toggleDisabled() {
    this.foodControl.enabled ? this.foodControl.disable() : this.foodControl.enable();
  }

}

Updated Image of working demo:

enter image description here

2
  • The select component doesn't appear to be available yet - github.com/angular/material2 Commented Dec 12, 2016 at 16:31
  • Actually I downloaded the material2 repo github.com/angular/material2 , then installed dependencies, and ran npm run demo-app. Then went to localhost port 4200. The demo for select works. I was unable to get the code to work in my project. I updated the post showing an image of the working component. Commented Dec 14, 2016 at 3:01

1 Answer 1

1

As said by Camden_kid, there is no md-select available for now in Angular Material 2.

Could you link the Demo app you're talking about ? Here is the one I found, https://material2-app.firebaseapp.com/ , linked from https://github.com/angular/material2 Getting started.

As far as I know, you're trying to use an angular 1 material component inside angular 2 code.

EDIT:

After looking through the linked demo-app, it appears for this demo they add some components which are not released yet. This is probably why you can't make md-select work on your project : unless you add the relevant files manually, you do not have the source they use in their demo.

If you are in great need, the relevant files are located on dist/@angular/material/select inside the demo-app repo. You should be able to use md-select by copy-pasting this folder inside your nodes_modules/@angular/material folder in your project.

However I strongly discourage this option, because if it is not released yet, it means it may change deeply before the final release, which would mean a necesseraly refactor for you at this time.

Sign up to request clarification or add additional context in comments.

6 Comments

Actually I downloaded the material2 repo github.com/angular/material2 , then installed dependencies, and ran npm run demo-app. Then went to localhost port 4200. The demo for select works. I was unable to get the code to work in my project. I updated the post showing an image of the working component.
Unfortunately I'm working behind a proxy which doesn't allow image visualization. I investigated the demo-app from Material 2 repo, I'll edit my answer in a few minutes.
Thank you. I actually removed Material from our project as I discovered it was way too opinionated. The only way I could find to make even the most trivial changes to CSS properties was by editing the source files. I just decided to make the components myself.
You're welcome. If I may give you an advice, Angular Material can be really interesting to use. It is true Material 2 is still an alpha version, and it should be way easier to use in a few months. About your CSS changes, it shouldn't be that hard to customize your component. Keep in mind Angular Material 2 follows https://material.io/guidelines/, so maybe some of your desired changes are not possible because against those specifications. If you need some help to customize material component, and if no question here can help you, open a new one and link it here. I'd have a look to it.
I really appreciate that. Before I start a new question an explanation may be best. The designer did not implement material guidelines. When I came into the project which has no front end currently the previous developer only used material to get signup/login auth working. Since we are a startup the idea was to use material to speed up the process for our MVP. The changes I was trying to make were not possible because I was attempting to override CSS styles defined within the components themselves. So in actuality our design is not based on material.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.