1
Basically all the themes are declared and no error is pointed out, but everything that is within the tags related to the angular material, is simply not rendered, the rest, which is not within these tags, work perfectly
What am I forgetting?
app.component.html
<mat-menu #appMenu="matMenu">
<button mat-menu-item><a routerLink='home' class="btn btn-primary active" role="button"
routerLinkActive="active">Home</a></button>
<button mat-menu-item><a routerLink="add" class="btn btn-primary active" role="button" routerLinkActive="active">Criar
Site</a></button>
<button mat-menu-item><a routerLink="sites" class="btn btn-primary active" role="button"
routerLinkActive="active">Sites</a></button>
</mat-menu>
<mat-sidenav-container>
<mat-sidenav>
<h1>{{title}}</h1>
</mat-sidenav>
</mat-sidenav-container>
<h1>{{title}}</h1>
<h2 class="col-md-12 text-center">Elasticsearch server status: {{status}}</h2>
<router-outlet></router-outlet>
app.modulets.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Component } from '@angular/core';
import { AppComponent } from './app.component';
import { MaterialModule } from './material/material.module';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
//Site Modules
import { AddSiteComponent } from './site/add-site/add-site.component';
import { SiteDetailsComponent } from './site/site-details/site-details.component';
import { ShowSitesComponent } from './site/show-sites/show-sites.component';
//Area Modules
import { AreasComponent } from './areas/areas.component';
//Pages Modules
import { PagesComponent } from './pages/pages.component';
import { RouterModule, Routes } from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LayoutModule } from '@angular/cdk/layout';
import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule } from '@angular/material';
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'add', component: AddSiteComponent },
{ path: 'sites', component: ShowSitesComponent },
];
@NgModule({
declarations: [
AppComponent,
AreasComponent,
PagesComponent,
AddSiteComponent,
SiteDetailsComponent,
ShowSitesComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(routes),
BrowserAnimationsModule,
MaterialModule,
NoopAnimationsModule,
LayoutModule,
MatToolbarModule,
MatButtonModule,
MatSidenavModule,
MatIconModule,
MatListModule
],
exports: [RouterModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
css style.
/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>XTR Conteúdos</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<app-root></app-root>
</body>
</html>