CODEWITHSUNDEEP
angularangular-materialangular-material2
user1400290
user1400290

Reputation: 1750

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:

Upvotes: 8

Views: 26596

Answers (5)

Xniper
Xniper

Reputation: 21

to solve this, following module to be imported for latest update.

import {MatRadioModule} from '@angular/material/radio';

Upvotes: 2

Sonik Malla
Sonik Malla

Reputation: 1

I encountered the same issue. Once I import the MatRadioModule in the child level module it works. I have the child level module called wizard.module.ts. I import MatRadioModule and then also include in the imports section of NgModule of wizard.module.ts file. Also once you import into the child level module, you can comment the import section from global module (app.module.ts) if you want. You don't need to import from both place.

Upvotes: 0

Amir Farahani
Amir Farahani

Reputation: 106

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

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

Upvotes: 9

user13547972
user13547972

Reputation: 1

I found the solution here:

import {MatRadioModule} from '@angular/material'

in the app modules

Upvotes: 0

FAISAL
FAISAL

Reputation: 34711

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.

Upvotes: 5

Related Questions