Reputation: 1750
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"> </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"> </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
Reputation: 21
to solve this, following module to be imported for latest update.
import {MatRadioModule} from '@angular/material/radio';
Upvotes: 2
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
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
Reputation: 1
I found the solution here:
import {MatRadioModule} from '@angular/material'
in the app modules
Upvotes: 0
Reputation: 34711
Please install Material 2 using the following commands:
package.json
, change/include "@angular/material"
and "@angular/cdk"
version "2.0.0-beta.10"
package.json
is located.npm install
For importing MdRadioModule
, use the following:
import { MdRadioModule } from '@angular/material';
Link to working demo.
Upvotes: 5