Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Issue using Material Radio Buttons in Angular 2 application

Platform: Ubuntu 14.0.1 NPM Version: 4.6.1

I have an Angular 2 application in which I am trying to use Material Radio Buttons. I have installed those using following command:

npm i @angular2-material/radio

I added following code in Module:

import { Component } from '@angular/core';
import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { MdRadioModule } from '@angular2-material/radio';

Following is content of .html file (that breaks):

<md-radio-group>
          <md-radio-button value="1">Option 1</md-radio-button>
          <md-radio-button value="2">Option 2</md-radio-button>
        </md-radio-group>

When I run application I get following error in browser's console & my application breaks there:

nhandled Promise rejection: Template parse errors:
'md-radio-group' is not a known element:
1. If 'md-radio-group' is an Angular component, then verify that it is part of this module.
2. If 'md-radio-group' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" <md-radio-button value="2">Option 2</md-radio-button>
        </md-radio-group>-->
        [ERROR ->]<md-radio-group></md-radio-group>
        <div class="page-card-separator">&nbsp;</div>
     "): AddProviderComponent@35:12 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
'md-radio-group' is not a known element:
1. If 'md-radio-group' is an Angular component, then verify that it is part of this module.
2. If 'md-radio-group' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" <md-radio-button value="2">Option 2</md-radio-button>
        </md-radio-group>-->
        [ERROR ->]<md-radio-group></md-radio-group>
        <div class="page-card-separator">&nbsp;</div>
     "): AddProviderComponent@35:12
at TemplateParser.parse (compiler.umd.js:8502)
at RuntimeCompiler._compileTemplate (compiler.umd.js:16882)
at eval (compiler.umd.js:16805)
at Set.forEach (<anonymous>)
at compile (compiler.umd.js:16805)
at ZoneDelegate.invoke (zone.js?1505985812318:192)
at Zone.run (zone.js?1505985812318:85)
at zone.js?1505985812318:451
at ZoneDelegate.invokeTask (zone.js?1505985812318:225)
at Zone.runTask (zone.js?1505985812318:125) Error: Template parse errors:
like image 903
user1400290 Avatar asked Sep 21 '17 09:09

user1400290


People also ask

How to use radio button in ANGULAR Material?

Radio-buttons should typically be placed inside of an <mat-radio-group> unless the DOM structure would make that impossible (e.g., radio-buttons inside of table cells). The radio-group has a value property that reflects the currently selected radio-button inside of the group.


2 Answers

At first install @angular/material and @angular/cdk, then import the related package inside app.module.ts file:

import { MatRadioModule } from '@angular/material';
like image 119
Amir Hossein Najafabadi Avatar answered Oct 08 '22 03:10

Amir Hossein Najafabadi


Please install Material 2 using the following commands:

  • In your package.json, change/include "@angular/material" and "@angular/cdk" version "2.0.0-beta.10"
  • In your terminal window, navigate to the folder in your project where package.json is located.
  • Run the command npm install

For importing MdRadioModule, use the following:

import { MdRadioModule } from '@angular/material';

Link to working demo.

like image 34
Faisal Avatar answered Oct 08 '22 05:10

Faisal