I've checked those questions:
and I've followed this tutorial:
and previously I've used Angular Material, but for this it just won't work:
compiler.js:1016 Uncaught Error: Template parse errors: 'mat-button-toggle' is not a known element: 1. If 'mat-button-toggle' is an Angular component, then verify that it is part of this module.
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { TRANSLATION_PROVIDERS } from './translations';
import { TranslateService } from './services/translator.service';
import { AppComponent } from './app.component';
import { MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule, MatRippleModule, MatDatepickerModule, MatNativeDateModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
BrowserModule,
FormsModule,
MatButtonModule,
MatCheckboxModule,
MatFormFieldModule,
MatInputModule,
MatRippleModule,
BrowserAnimationsModule,
MatDatepickerModule,
],
exports: [
BrowserModule,
FormsModule,
MatButtonModule,
MatCheckboxModule,
MatFormFieldModule,
MatInputModule,
MatRippleModule,
BrowserAnimationsModule,
MatDatepickerModule,
],
declarations: [AppComponent],
providers: [TRANSLATION_PROVIDERS, TranslateService],
bootstrap: [AppComponent]
})
export class AppModule { }
(here I am just trying to add those buttons even without real functionality)
....
<div>
<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
<mat-button-toggle value="bold">Bold</mat-button-toggle>
<mat-button-toggle value="italic">Italic</mat-button-toggle>
<mat-button-toggle value="underline">Underline</mat-button-toggle>
</mat-button-toggle-group>
</div>
...
styles.css
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
body {
font-family: Roboto, Arial, sans-serif;
margin: 0;
}
.basic-container {
padding: 30px;
}
.version-info {
font-size: 8pt;
float: right;
}
html, body { height: 100%; }
body { margin: 0; font-family: 'Roboto', sans-serif; }
By default, mat-button-toggle-group acts like a radio-button group- only one item can be selected. In this mode, the value of the mat-button-toggle-group will reflect the value of the selected button and ngModel is supported. Adding the multiple attribute allows multiple items to be selected (checkbox behavior).
The <mat-button-toggle>, an Angular Directive, is used to create a toggle or on/off button with material styling and animations. mat-button-toggle buttons can be configured to behave as radio buttons or checkboxes.
Angular directing <mat-button> is used to create a button with content styling and animations. Angular content buttons are native <button> or elements enhanced with styling and ink ripples. Native <button> and <a> elements are used to provide the accessible experience for users.
mat-button-toggle
is available as a part of the MatButtonToggleModule
So you'll have to import that as well.
Add an import statement for the same in your AppModule:
import {MatButtonToggleModule} from '@angular/material/button-toggle';
And then add it to the imports
array as well so that AppModule's templates can understand what mat-button-toggle
is.
Also, I'm not really sure why you've exported these modules from your AppModule. We generally export anything from a module if we are planning on importing that module in some other module. But since this is the AppModule, and thus your RootModule, I don't think you'll be importing it in any other module. That might not be the case though.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With